HTML5中Canvas实现橡皮擦功能合成模式选择

Canvas橡皮擦效果通过globalCompositeOperation="destination-out"实现，该模式在重叠区保留原图未被覆盖部分，使新绘制路径“挖掉”底层内容；需确保目标已绘制、背景透明，并在擦除后恢复合成模式。

在Canvas中实现橡皮擦效果，关键不是“擦除”，而是通过特定的globalCompositeOperation合成模式，让新绘制的内容“隐藏”已有内容。最常用且可靠的方式是使用 "destination-out" 模式。

为什么选 destination-out？

该模式的逻辑是：在重叠区域，只保留原图像（destination）中**未被新图形覆盖**的部分，新图形（source）完全透明，不留下颜色。这正好模拟了橡皮擦——画笔经过的地方，底层内容被“挖掉”，露出透明背景（或父容器底色）。

注意：Canvas本身没有“图层”概念，所以橡皮擦生效的前提是——目标内容必须已绘制在Canvas上（即作为destination存在），不能对尚未绘制的内容起作用。

基础实现步骤

• 确保Canvas背景为透明（默认即透明；若设过fillStyle并填充过，需先用clearRect()清空）
• 设置绘图上下文：ctx.globalCompositeOperation = "destination-out";
• 用beginPath()、lineTo()或arc()等绘制擦除路径（建议用细线宽，如lineWidth = 20）
• 调用stroke()完成擦除（fill()也可，但通常用描边更符合橡皮擦手感）

常见误区与替代方案

不要用 "xor"：该模式行为不稳定，依赖当前像素颜色，多次绘制同一区域会产生闪烁或残留，不适合精确擦除。

立即学习“前端免费学习笔记（深入）”；

慎用 "copy" 或 "clear"："clear"会把整个重叠区域变透明，但无法做抗锯齿边缘；"copy"则完全替换而非“擦除”，易误伤。

如果需要“擦除到指定背景色”（如白色画布），可先将Canvas内容绘制到离屏canvas，再用"destination-over"叠加背景色，但这已超出纯橡皮擦范畴。

补充技巧：擦除时保持绘制状态

切换合成模式后，记得在其他绘制操作前恢复原值（如"source-over"），否则后续所有绘制都会按擦除逻辑执行。

推荐封装成函数：

function startErasing() {  ctx.globalCompositeOperation = "destination-out";}function stopErasing() {  ctx.globalCompositeOperation = "source-over";}