CanvasRenderingContext2D:shadowColor 属性

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.shadowColor 属性用于描述阴影颜色。

请注意,在进行填充时,阴影的渲染不透明度会受到 fillStyle 颜色的不透明度的影响;或在进行描边时,受到 strokeStyle 颜色的不透明度的影响。

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

一个被解析为 CSS <color> 值的字符串。默认值是完全透明的黑色。

示例

为形状添加阴影

这个例子向两个正方形添加阴影;第一个是填充的,第二个是描边的。shadowColor 属性设置阴影的颜色,而 shadowOffsetXshadowOffsetY 设置阴影相对于形状的位置。

HTML

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

JavaScript

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

// 阴影
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// 填充的矩形
ctx.fillRect(20, 20, 100, 100);

// 描边的矩形
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");

// 阴影
ctx.shadowColor = "rgba(255, 0, 0, 0.8)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// 填充的矩形
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(10, 10, 150, 100);

// 描边的矩形
ctx.lineWidth = 10;
ctx.strokeStyle = "rgba(0, 0, 255, 0.6)";
ctx.strokeRect(10, 10, 150, 100);

结果

规范

Specification
HTML Standard
# dom-context-2d-shadowcolor-dev

浏览器兼容性

BCD tables only load in the browser

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

参见