canvas 的全局合成模式 destination-out 是实现“橡皮擦”和“刮刮乐”效果的核心，它通过擦除已有内容留下透明区域，需设置后绘制路径并注意恢复默认模式、背景纯色、高dpi适配及撤销方案。
Canvas 的全局合成模式（globalCompositeOperation）是实现“橡皮擦”和“刮刮乐”效果的核心机制，关键在于利用 destination-out 模式——它让新绘制的内容“擦除”已有内容，只保留透明区域，而非覆盖颜色。
一、基础原理：destination-out 是橡皮擦的灵魂
Canvas 默认绘制模式是 source-over（新图形叠在旧图形上）。而设为 destination-out 后，新绘制的像素会“挖掉”目标（即已存在的画布内容），留下透明通道。这正是实现擦除或刮开效果的底层逻辑。
- 必须在
ctx.globalCompositeOperation = 'destination-out'后再绘制（如线条、圆形、图片裁剪路径） - 该模式对透明度敏感：若目标区域本身含半透明像素，擦除后可能残留灰边；建议原始图片背景为纯不透明色（如白色），或先用
ctx.fillStyle = 'white'; ctx.fillRect(0,0,w,h)铺底 - 操作完擦除动作后，记得恢复为
'source-over'，否则后续绘制会继续“擦除”而不是“绘制”
二、实现图片橡皮擦效果（手指/鼠标擦除局部）
适用于用户自由涂抹擦除图片某部分，比如隐藏敏感信息、制作互动教学图。
- 将原图用
drawImage()绘制到 canvas 上 - 监听
mousedown/touchstart→ 记录起点；mousemove/touchmove→ 用lineTo()连续绘制路径；mouseup/touchend→ 结束路径 - 绘制前设置：
ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 30; ctx.lineCap = 'round'; ctx.lineJoin = 'round' - 每次绘制路径时调用
ctx.stroke()，即可实时“擦掉”图片对应区域
三、实现刮刮乐效果（覆盖层刮开 reveal 内容）
典型场景：奖品遮罩层（如灰色矩形或纹理图案），用户刮开后显示下方文字/图片。
- 分两层绘制：先画底层内容（如“恭喜中奖！”文字或奖品图），再在其上绘制全覆盖的遮罩层（如
ctx.fillStyle = '#ccc'; ctx.fillRect(0,0,w,h)） - 设置
ctx.globalCompositeOperation = 'destination-out' - 用圆形或笔刷路径在遮罩层上“刮”——实际是擦除遮罩，露出下层内容
- 进阶技巧：用
createPattern()创建噪点/纸纹图案作为遮罩，擦除后呈现更真实的“刮开”质感
四、注意事项与兼容性提醒
destination-out 在所有现代浏览器（含移动端）均支持，但不支持 IE9 及以下。 实际开发中还需注意：
- Canvas 像素操作依赖分辨率：高 DPI 屏幕需按
window.devicePixelRatio缩放 canvas 的width/height属性，并用 CSS 控制显示尺寸，否则擦除变细或模糊 - 频繁擦除可能影响性能，可考虑限制擦除笔刷最大尺寸，或使用离屏 canvas 预渲染擦除路径再合并
- 若需“撤销擦除”，不能靠合成模式逆向操作，应记录擦除路径并重绘原图对应区域（或保存原始图像快照）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
