刮刮乐和橡皮擦效果的核心是使用 globalcompositeoperation 的 "destination-out" 模式擦除遮罩层而非覆盖颜色；需分层绘制（底层奖品+顶层不透明遮罩），擦除时切换合成模式、统一处理鼠标/触摸事件坐标，并用圆形擦除配合圆角提升体验。

Canvas 实现刮刮乐和橡皮擦效果，核心是利用 globalCompositeOperation 的 "destination-out" 模式 —— 它能让新绘制的内容“擦掉”已有内容（只影响 alpha 通道），而不是覆盖颜色。关键不在“画”，而在“删”。

一、基础画布与遮罩层准备

刮刮乐本质是：底层显示奖品（文字/图片），上层盖一层不透明色块（如灰色或黑色），用户划过时擦除上层，露出底层。因此需确保：

• 底层内容（奖品）先绘制完成，且不能被后续操作影响；
• 遮罩层单独绘制在顶层，使用纯色 + 不透明度 1；
• 擦除时仅作用于遮罩层，不影响底层。

二、设置擦除模式的关键代码

擦除前必须切换合成模式，并确保绘图样式正确：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 调用 ctx.globalCompositeOperation = "destination-out"；
• 设置 ctx.fillStyle 或 ctx.strokeStyle 为任意不透明色（实际只读 alpha，颜色值无关）；
• 若用 fillRect 或 fill()，需确保路径闭合或区域明确；
• 擦除后建议恢复默认合成模式：ctx.globalCompositeOperation = "source-over"，避免影响后续绘制。

三、支持鼠标和触摸的擦除逻辑

要兼容 PC 和手机，需同时监听 mousedown/mousemove/mouseup 和 touchstart/touchmove/touchend，并统一处理坐标：

• 获取事件坐标时，用 getBoundingClientRect() 计算相对于 canvas 的偏移；
• 触摸事件取 touches[0]，鼠标事件取 clientX/Y；
• 推荐用“画圆”方式擦除（比直线更自然）：在移动过程中，以当前点为中心 fillCircle，半径 20~40px；
• 开启 ctx.lineCap = "round" 和 ctx.lineJoin = "round" 可让连续划线更平滑。

四、优化体验的小技巧

纯 Canvas 擦除容易显得生硬，加点细节提升真实感：

• 擦除时给遮罩层加轻微模糊（用 shadowBlur + 同色 shadowColor），模拟橡皮边缘虚化；
• 记录已擦除面积占比，达到阈值（如 60%）自动触发“刮开”动画或提示；
• 移动端注意阻止默认行为：e.preventDefault() 在 touchmove 中防止页面滚动；
• 性能敏感场景下，可将遮罩层单独画在离屏 canvas 上，主 canvas 只做合成，减少重绘压力。

不复杂但容易忽略：擦除不是“画白色”，而是“挖洞”。只要 composite 模式设对、图层分清、坐标算准，刮刮乐就稳了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！