Canvas shadowOffsetX 属性
示例
绘制一个阴影位于矩形右侧 20 像素(相对于矩形左侧位置)的矩形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);
自己动手试一试 »
描述
shadowOffsetX 属性设置或返回阴影与形状之间的水平距离。
默认值为 0。
值 | 描述 |
---|---|
0 | 阴影位于形状的正后方 |
20 | 阴影在形状左侧位置右侧 20 像素处开始 |
-20 | 阴影在形状左侧位置左侧 20 像素处开始 |
另请参阅
shadowOffsetY 属性(设置阴影的 Y 轴位置)
shadowColor 属性(设置阴影颜色)
shadowBlur 属性(设置阴影模糊度)
fillRect() 方法(绘制填充矩形)
fillStyle() 属性(设置填充颜色/样式)
语法
context.shadowOffsetX = number |
属性值
值 | 描述 | 试一试 |
---|---|---|
数字 | 到形状阴影的水平距离 | 试一试 » |
浏览器支持
<canvas>
元素是 HTML5 标准(2014)。
shadowOffsetX
在所有现代浏览器中都得到支持
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考