CanvasRenderingContext2D: shadowColor 属性

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上使用。它自 2015 年 7 月.

报告反馈

**CanvasRenderingContext2D.shadowColor** 属性是 Canvas 2D API 的一个属性，用于指定阴影的颜色。

请注意，阴影的渲染不透明度会受到填充时的 fillStyle 颜色和描边时的 strokeStyle 颜色的不透明度影响。

值

**注意：** 只有当 shadowColor 属性设置为非透明值时，才会绘制阴影。此外，shadowBlur、shadowOffsetX 或 shadowOffsetY 属性之一必须是非零值。

示例

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

为形状添加阴影

HTML

此示例为两个正方形添加阴影；第一个正方形被填充，第二个正方形被描边。shadowColor 属性设置阴影的颜色，而 shadowOffsetX 和 shadowOffsetY 设置它们相对于形状的位置。
<canvas id="canvas"></canvas>

JavaScript

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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

js

结果

半透明形状上的阴影

HTML

此示例为两个正方形添加阴影；第一个正方形被填充，第二个正方形被描边。shadowColor 属性设置阴影的颜色，而 shadowOffsetX 和 shadowOffsetY 设置它们相对于形状的位置。
<canvas id="canvas"></canvas>

JavaScript

阴影的不透明度会受到其父对象的不透明度级别影响（即使 shadowColor 指定了完全不透明的值）。此示例使用半透明颜色描边和填充矩形。

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

// Shadow
ctx.shadowColor = "rgb(255 0 0 / 80%)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// Filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 20%)";
ctx.fillRect(10, 10, 150, 100);

// Stroked rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0 0 255 / 60%)";
ctx.strokeRect(10, 10, 150, 100);

js

规范

填充阴影的最终 alpha 值为 .8 * .2，即 .16。描边阴影的 alpha 值为 .8 * .6，即 .48。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-shadowcolor-dev

WebKit/Blink 特定说明

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

另请参阅

  • 在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了非标准且已弃用的方法 ctx.setShadow()。