CanvasRenderingContext2D：shadowBlur 屬性
Canvas 2D API 的 CanvasRenderingContext2D.shadowBlur 屬性指定應用於陰影的模糊量。預設值為 0（無模糊）。
注意： 僅當 shadowColor 屬性設定為非透明值時，才會繪製陰影。shadowBlur、shadowOffsetX 或 shadowOffsetY 屬性中至少有一個也必須非零。
值
一個非負浮點數，表示陰影模糊的級別，其中 0 表示無模糊，較大的數字表示越來越強的模糊。此值不對應於畫素數量，並且不受當前變換矩陣的影響。預設值為 0。負值、Infinity 和 NaN 值將被忽略。
示例
為形狀新增陰影
此示例為矩形添加了模糊陰影。shadowColor 屬性設定其顏色，shadowBlur 設定其模糊級別。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-shadowblur-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);