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 |
瀏覽器相容性
載入中…