CanvasRenderingContext2D: shadowBlur 属性

基线 广泛可用

此功能已发展成熟，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载

在基于 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);

另请参阅