CanvasRenderingContext2D：shadowColor 屬性
Canvas 2D API 的 CanvasRenderingContext2D.shadowColor 屬性用於指定陰影的顏色。
請注意，陰影的渲染透明度會受到填充時 fillStyle 顏色的透明度和描邊時 strokeStyle 顏色的透明度的影響。
注意： 只有當 shadowColor 屬性設定為非透明值時，才會繪製陰影。此外，shadowBlur、shadowOffsetX 或 shadowOffsetY 屬性中至少有一個也必須非零。
值
示例
為形狀新增陰影
此示例為兩個正方形添加了陰影；第一個正方形被填充，第二個正方形被描邊。shadowColor 屬性設定陰影的顏色，而 shadowOffsetX 和 shadowOffsetY 設定其相對於形狀的位置。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// Filled rectangle
ctx.fillRect(20, 20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);
結果
半透明形狀上的陰影
陰影的透明度受其父物件的透明度級別影響（即使 shadowColor 指定了完全不透明的值）。此示例用半透明顏色描邊和填充矩形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
填充陰影的最終 alpha 值為 .8 * .2，即 .16。描邊陰影的 alpha 值為 .8 * .6，即 .48。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "rgb(255 0 0 / 80%)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;
// Filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 20%)";
ctx.fillRect(10, 10, 150, 100);
// Stroked rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0 0 255 / 60%)";
ctx.strokeRect(10, 10, 150, 100);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-shadowcolor-dev |
瀏覽器相容性
載入中…
WebKit/Blink 特定說明
在基於 WebKit 和 Blink 的瀏覽器中，除了此屬性之外，還實現了非標準的、已棄用的 ctx.setShadow() 方法。
js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);
另見
- 定義此屬性的介面：
CanvasRenderingContext2D