本文详解如何在 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()。此时可利用混合模式绕过裁剪限制：
- 先在裁剪区内完成所有内容绘制；
- 临时取消裁剪，将整个画布内容（或目标路径）以巨大偏移重绘到画布外侧；
- 设置 globalCompositeOperation = "destination-over"，使重绘内容仅贡献阴影，不覆盖原图。
function addRoundedCornersWithShadowComplex() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = 300, height = 200;
const cornerRadius = 20;
const shadowBlur = 20;
const shadowOffsetX = 5;
const shadowOffsetY = 5;
canvas.width = width + shadowBlur * 2 + Math.abs(shadowOffsetX);
canvas.height = height + shadowBlur * 2 + Math.abs(shadowOffsetY);
ctx.save(); // 保存初始状态
// 步骤1：绘制内容（在裁剪区内）
const roundRectPath = new Path2D();
roundRectPath.roundRect(
shadowBlur + shadowOffsetX,
shadowBlur + shadowOffsetY,
width, height,
cornerRadius
);
ctx.clip(roundRectPath);
// 示例：绘制彩色随机矩形（实际业务中可替换为任意绘图逻辑）
for (let i = 0; i < 30; i++) {
ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 60%)`;
ctx.fillRect(
Math.random() * width + shadowBlur + shadowOffsetX,
Math.random() * height + shadowBlur + shadowOffsetY,
Math.random() * 40 + 10,
Math.random() * 40 + 10
);
}
// 步骤2：移除裁剪，准备投射阴影
ctx.restore(); // 恢复未裁剪状态
// 步骤3：配置阴影并“错位重绘”
ctx.shadowBlur = shadowBlur;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowOffsetX = shadowOffsetX;
ctx.shadowOffsetY = shadowOffsetY;
ctx.globalCompositeOperation = 'destination-over';
// 将原画布内容向左平移一个画布宽度，使其阴影落在可视区
ctx.drawImage(canvas, -canvas.width, 0);
// 清理
ctx.globalCompositeOperation = 'source-over';
ctx.shadowBlur = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}? 总结与选型建议
| 场景 | 推荐方案 | 优势 | 注意点 |
|---|---|---|---|
| 单图圆角+阴影 | CanvasPattern + roundRect() | 代码简洁、性能好、易维护 | 需兼容 roundRect() 或手写路径；注意画布尺寸 |
| 多图层/动态内容 | clip() + destination-over | 完全保留 Canvas 绘图灵活性 | 逻辑稍复杂；需精确控制坐标偏移 |
无论哪种方式，画布尺寸扩容和阴影参数预计算都是关键前置步骤。避免直接复用原始图片尺寸，否则阴影必然被裁切。最后，善用 ctx.save() / ctx.restore() 或 ctx.resetTransform() 保证状态隔离，可显著提升代码健壮性与可维护性。
