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 參考
