本文详解如何在 HTML Canvas 中正确实现多图像分层着色，避免颜色相互覆盖；核心在于合理运用 globalCompositeOperation（如 source-in、destination-over）控制绘制顺序与像素混合逻辑，并确保各图层颜色互不干扰。
本文详解如何在 html canvas 中正确实现多图像分层着色，避免颜色相互覆盖；核心在于合理运用 `globalcompositeoperation`（如 `source-in`、`destination-over`）控制绘制顺序与像素混合逻辑，并确保各图层颜色互不干扰。
在 Canvas 中实现「底图单色 + 图案单色 + 轮廓线」三层叠加效果时，常见误区是直接对已绘制图像区域重复使用 source-in 填色——这会导致后续填色操作作用于整个画布的 alpha 通道，而非仅限目标图像的不透明像素，从而意外覆盖底层颜色。
正确的绘制逻辑应遵循从上到下、逆向构建原则：先绘制需着色的前景元素（如图案），用 source-in 精准着色；再用 destination-over 将底图（白色基底）填充至其下方；最后以 source-over 叠加轮廓线。关键在于：着色操作必须在对应图像绘制后立即执行，且严格限定复合模式的作用范围。
以下是推荐的完整实现流程（适配你的三张图像）：
// 假设 baseImage、patternImage、outlineImage 已加载完成
const ctx = canvas.getContext('2d');
const { width: w, height: h } = canvas;
// Step 1: 绘制图案（白色 patternImage），作为后续着色的“蒙版”
ctx.drawImage(patternImage, 0, 0, w, h);
// Step 2: 仅对图案的不透明区域填充指定颜色（#70E9EE）
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = '#70E9EE';
ctx.fillRect(0, 0, w, h);
// Step 3: 切换为 destination-over —— 将底图（白色 baseImage）绘制在其下方
// 注意：此时 baseImage 的白色像素会与当前画布内容混合，但因 base 是纯白且无透明度，
// 实际效果等价于为背景区域填充新颜色（#FFC3E1），且不会影响已着色的图案区域
ctx.globalCompositeOperation = 'destination-over';
ctx.drawImage(baseImage, 0, 0, w, h);
// ✅ 此处可选：若 baseImage 本身是纯白，也可直接用 fillRect + color 替代：
// ctx.fillStyle = '#FFC3E1';
// ctx.fillRect(0, 0, w, h);
// Step 4: 恢复默认混合模式，绘制轮廓线（outlineImage）
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(outlineImage, 0, 0, w, h);
⚠️ 重要注意事项：
- source-in 仅保留目标区域（即当前绘制图像的非透明像素）并用 fillStyle 填充，其余区域变透明 —— 因此必须在 drawImage(patternImage) 后立刻执行，否则画布状态改变将导致蒙版失效；
- destination-over 表示“将新内容绘制在现有内容之下”，适合把底图“垫”在已着色图案下方；
- 所有 globalCompositeOperation 更改后，建议显式重置为 'source-over'（默认值），避免影响后续绘制；
- 若 baseImage 或 patternImage 包含半透明像素，请预先用 getImageData/putImageData 处理为二值 alpha（全透明/全不透明），确保 source-in 行为可预测。
通过该流程，图案与底图的颜色完全解耦：图案区域仅响应其专属 fillStyle，底图区域仅响应其专属填充（或图像），轮廓线则始终位于最顶层，实现真正独立可控的三层着色效果。
