CanvasRenderingContext2D:shadowBlur 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.shadowBlur 属性用于描述模糊效果程度。默认值是 0(没有模糊)。

备注: 只有当 shadowColor 属性设置为非透明值时,阴影才会被绘制。其中的 shadowBlurshadowOffsetXshadowOffsetY 属性中至少有一个必须是非零的。

一个非负浮点数,指定阴影模糊的级别,其中 0 表示没有模糊,数字越大表示模糊程度越高。这个值不对应于像素数量,并且不受当前变换矩阵的影响。默认值为 0。负数、InfinityNaN 将被忽略。

示例

为形状添加阴影

这个例子向一个矩形添加了模糊的阴影。shadowColor 属性设置阴影的颜色,而 shadowBlur 设置阴影的模糊程度。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 阴影
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

// 矩形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

结果

规范

Specification
HTML
# dom-context-2d-shadowblur-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shadowBlur

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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

参见