CanvasRenderingContext2D: shadowOffsetY 屬性
Canvas 2D API 的 CanvasRenderingContext2D.shadowOffsetY 屬性指定了陰影的垂直偏移距離。
注意： 只有當 shadowColor 屬性設定為非透明值時，才會繪製陰影。此外，shadowBlur、shadowOffsetX 或 shadowOffsetY 屬性中至少有一個必須非零。
值
一個浮點數，指定了陰影的垂直偏移距離。正值表示向下偏移，負值表示向上偏移。預設值為 0（無垂直偏移）。Infinity 和 NaN 值將被忽略。
示例
垂直移動陰影
此示例為矩形添加了一個模糊的陰影。shadowColor 屬性設定了其顏色，shadowOffsetY 將其向下偏移 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.shadowOffsetY = 25;
ctx.shadowBlur = 10;
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-shadowoffsety-dev |
瀏覽器相容性
載入中…