CanvasRenderingContext2D：shadowOffsetX 属性
Canvas 2D API 的 CanvasRenderingContext2D.shadowOffsetX 属性指定了阴影水平偏移的距离。
注意： 只有当 shadowColor 属性被设置为非透明值时，才会绘制阴影。并且，shadowBlur、shadowOffsetX 或 shadowOffsetY 属性中至少有一个必须是非零值。
值
一个浮点数，指定了阴影水平偏移的距离。正值表示向右偏移，负值表示向左偏移。默认值为 0（无水平偏移）。Infinity 和 NaN 值将被忽略。
示例
移动阴影（水平方向）
此示例为矩形添加了模糊阴影。shadowColor 属性设置了阴影的颜色，shadowOffsetX 将阴影水平向右偏移 25 个单位，而 shadowBlur 属性则为其设置了 10 的模糊级别。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 25;
ctx.shadowBlur = 10;
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-shadowoffsetx-dev |
浏览器兼容性
加载中…