Canvas 阴影属性简介

Canvas 2D 上下文提供了4个阴影相关的属性，用于为绘制的图形添加阴影效果：

1. shadowColor

设置阴影的颜色。

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';  // 半透明黑色
ctx.shadowColor = '#ff0000';              // 红色
ctx.shadowColor = 'blue';                // 蓝色
  • 默认值：transparent（透明，即无阴影）
  • 支持任何合法的 CSS 颜色值

2. shadowBlur

设置阴影的模糊程度（像素值）。

ctx.shadowBlur = 10;   // 轻度模糊
ctx.shadowBlur = 30;   // 重度模糊
  • 默认值：0（无模糊，边缘清晰）
  • 值越大，阴影边缘越柔和扩散

3. shadowOffsetX

设置阴影的水平偏移量（像素值）。

ctx.shadowOffsetX = 5;   // 向右偏移5像素
ctx.shadowOffsetX = -5;  // 向左偏移5像素
  • 默认值：0

4. shadowOffsetY

设置阴影的垂直偏移量（像素值）。

ctx.shadowOffsetY = 5;   // 向下偏移5像素
ctx.shadowOffsetY = -5;  // 向上偏移5像素
  • 默认值：0

完整示例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置阴影
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

// 绘制一个带阴影的矩形
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 150, 100);

// 绘制一个带阴影的圆形
ctx.beginPath();
ctx.arc(350, 120, 60, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();

注意事项

  1. 性能影响：阴影会增加渲染计算量，大量图形同时使用阴影可能导致性能下降
  2. 关闭阴影：不需要阴影时，将 shadowColor 设为 transparent 或将 shadowBlur 设为 0
  3. 影响所有后续绘图：阴影设置一旦生效，会影响之后的所有绘制操作，直到被修改或重置
  4. 不支持单独关闭：没有单独的 disableShadow() 方法，需手动重置属性

常用技巧

实现发光效果（阴影颜色与填充颜色相同，无偏移）：

ctx.shadowColor = '#ffff00';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = '#ffff00';
ctx.fillRect(100, 100, 80, 40);

实现内阴影效果（反向偏移，配合裁剪区域）：
需要结合 clip() 方法实现，相对复杂一些。