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);