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";
}前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
