CanvasRenderingContext2D：shadowColor 属性
Canvas 2D API 的 CanvasRenderingContext2D.shadowColor 属性用于指定阴影的颜色。
请注意，阴影的渲染透明度会受到填充时 fillStyle 颜色的透明度和描边时 strokeStyle 颜色的透明度的影响。
注意： 只有当 shadowColor 属性设置为非透明值时，才会绘制阴影。此外，shadowBlur、shadowOffsetX 或 shadowOffsetY 属性中至少有一个也必须非零。
值
示例
为形状添加阴影
此示例为两个正方形添加了阴影；第一个正方形被填充，第二个正方形被描边。shadowColor 属性设置阴影的颜色，而 shadowOffsetX 和 shadowOffsetY 设置其相对于形状的位置。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
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);
结果
半透明形状上的阴影
阴影的透明度受其父对象的透明度级别影响（即使 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");
// 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);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-shadowcolor-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);
另见
- 定义此属性的接口：
CanvasRenderingContext2D