如何用Canvas和destination-out创建发散的半透明圆形阴影？

要在Canvas中使用destination-out合成模式创建发散的半透明圆形阴影，你可以按照以下步骤进行：

1. 创建Canvas元素

首先，在HTML中创建一个Canvas元素，并获取其2D上下文。

<canvas id="myCanvas" width="500" height="500"></canvas>

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

2. 绘制背景

为了看到效果，可以先绘制一个背景。

ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);

3. 绘制圆形阴影

接下来，使用destination-out合成模式来创建发散的半透明圆形阴影。

// 设置合成模式为destination-out
ctx.globalCompositeOperation = 'destination-out';

// 设置阴影的模糊效果
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

// 绘制圆形
ctx.beginPath();
ctx.arc(250, 250, 100, 0, Math.PI * 2);
ctx.fill();

// 恢复合成模式
ctx.globalCompositeOperation = 'source-over';

4. 解释代码

• ctx.globalCompositeOperation = 'destination-out';：将合成模式设置为destination-out，这样新绘制的内容会从已有的内容中“挖出”形状。
• ctx.shadowBlur = 20;：设置阴影的模糊程度。
• ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';：设置阴影的颜色和透明度。
• ctx.arc(250, 250, 100, 0, Math.PI * 2);：绘制一个圆形，圆心在(250, 250)，半径为100。
• ctx.globalCompositeOperation = 'source-over';：恢复合成模式为默认值。

5. 完整代码

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制背景
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 设置合成模式为destination-out
  ctx.globalCompositeOperation = 'destination-out';

  // 设置阴影的模糊效果
  ctx.shadowBlur = 20;
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(250, 250, 100, 0, Math.PI * 2);
  ctx.fill();

  // 恢复合成模式
  ctx.globalCompositeOperation = 'source-over';
</script>

6. 运行效果

运行上述代码后，你会在Canvas中看到一个发散的半透明圆形阴影效果。

注意事项

• destination-out合成模式会将新绘制的内容从已有的内容中“挖出”，因此在使用时要注意绘制顺序。
• 你可以通过调整shadowBlur和shadowColor的值来改变阴影的效果。

通过这种方式，你可以在Canvas中创建出复杂的阴影效果。