如何在 Canvas 中为圆角图片添加阴影效果-js教程

本文详解如何在 html5 canvas 中同时实现图片圆角裁剪与投影效果，解决因 `clip()` 导致阴影被裁切的常见问题，并提供基于 `canvaspattern` 和 `globalcompositeoperation` 的两种可靠方案。

在 Canvas 中为图片添加圆角和阴影看似简单，但二者结合时容易踩坑：一旦调用 ctx.clip()，后续绘制（包括阴影）都会被限制在裁剪区域内，导致阴影完全不可见。根本原因在于 shadow 是绘制操作的视觉副产物，而非独立图层——它依附于被描边或填充的路径，且受当前裁剪路径约束。

✅ 推荐方案一：使用 CanvasPattern + roundRect()（简洁高效）

适用于仅需渲染单张图片的场景。核心思路是避免裁剪，改用 createPattern() 将图片作为填充样式，再用 fill() 绘制圆角路径——此时阴影可完整渲染在路径外围。

async function addRoundedCornersWithShadow() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const image = new Image();
  image.src = 'https://picsum.photos/200/300';
  await image.decode(); // 确保图像解码完成，避免渲染异常

  const cornerRadius = 20;
  const shadowBlur = 20;
  const shadowOffsetX = 5;
  const shadowOffsetY = 5;

  // 关键：扩大画布尺寸，为阴影预留空间
  canvas.width = image.width + shadowBlur * 2 + Math.abs(shadowOffsetX);
  canvas.height = image.height + shadowBlur * 2 + Math.abs(shadowOffsetY);

  // 创建无重复图案，并设置为填充样式
  ctx.fillStyle = ctx.createPattern(image, 'no-repeat');

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

  // 平移坐标系，使圆角矩形居中显示（左上角对齐阴影区域）
  ctx.translate(shadowBlur - (shadowOffsetX > 0 ? 0 : shadowOffsetX), 
                 shadowBlur - (shadowOffsetY > 0 ? 0 : shadowOffsetY));

  // 绘制圆角矩形路径（现代 API，兼容性需检查）
  ctx.roundRect(0, 0, image.width, image.height, cornerRadius);

  // 填充（即“绘制图片”），阴影自动应用
  ctx.fill();

  // 清理状态（推荐）
  ctx.resetTransform();
  ctx.shadowBlur = 0;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.fillStyle = '#000';
}

⚠️ 注意事项：roundRect() 是较新 API（Chrome 104+、Firefox 116+ 支持），旧环境可用 arcTo() 手动绘制（如原问题代码），但需确保路径闭合。await image.decode() 可防止图像未加载完成就执行绘制，提升稳定性。画布尺寸必须包含阴影扩展区域，否则仍会被截断。

✅ 方案二：clip() + destination-over（复杂图形适用）

当需要在圆角区域内绘制多图层、文字、矢量图形等复合内容时，仍需 clip()。此时可利用混合模式绕过裁剪限制：