Canvas 刮奖卡片交互的实现原理，核心就是通过两层 Canvas 叠加完成：底层用于展示中奖结果或提示内容，上层覆盖一层可被“刮开”的遮罩，再结合 globalCompositeOperation="destination-out" 实现擦除效果；同时配合鼠标事件或触摸事件，使用圆形或圆角矩形路径持续擦除；当用户刮开到一定比例后，再利用 getImageData 统计已擦除区域占比，从而触发对应的反馈逻辑。
使用 Canvas 实现刮奖卡片效果，关键在于借助 globalCompositeOperation = "destination-out" 模式，在遮罩层上执行“擦除”操作，从而显示底层内容。重点并不只是绘制图形，而是像素级擦除处理，以及对移动端触摸和桌面端鼠标事件的兼容适配。
准备两层 Canvas 结构
刮奖卡片效果的本质是“遮罩层 + 擦除层”，因此通常需要两个重叠放置的 canvas：
- 底层 canvas：用于绘制中奖文字、图标、奖品信息或背景图案（例如“恭喜中奖！”）
- 上层 canvas：铺满灰色、银色或金色的刮刮乐遮罩层（可通过
fillRect绘制纯色区域），作为可擦除图层
两个 canvas 的宽高必须保持完全一致，再通过 CSS 叠加定位（position: relative/absolute）实现上下覆盖，确保绘制坐标精确对齐。
设置擦除模式并监听交互事件
在上层 canvas 的 2D 绘图上下文中开启“擦除”混合模式：
ctx.globalCompositeOperation = "destination-out";
接着绑定鼠标或触摸交互事件：
mousedown+mousemove+mouseup（适用于 PC 桌面端）touchstart+touchmove+touchend（适用于移动端）
需要注意：touch 事件通常要调用 event.preventDefault()，以防止页面跟随滚动；在获取坐标时，touch 应使用 touches[0]，mouse 则使用 clientX/Y 减去 canvas 的偏移量（通过 getBoundingClientRect() 计算），这样才能保证刮擦位置准确无误。
用圆角矩形或圆形模拟刮擦笔触
如果直接画线，刮擦轨迹容易出现断裂，因此更推荐使用带半径的圆角矩形或实心圆来连续绘制刮擦区域：
- 每次移动时，以当前坐标点为中心绘制一个半径 15–25px 的实心圆（
arc+fill） - 或者使用
roundRect（Chrome 117+ 支持）绘制短路径片段，使刮擦效果更自然顺滑 - 也可以开启
ctx.lineCap = "round"和ctx.lineJoin = "round"，再结合lineWidth绘制路径，达到连贯平滑的刮奖效果
关键点在于：所有擦除绘制操作都必须发生在上层 canvas 中，并始终保持 destination-out 模式，只有这样才能真正“刮掉”表层涂层，显示下方的中奖内容。
添加刮开面积检测与反馈
仅有视觉上的擦除还不够，用户通常还需要明确知道自己是否已经刮开足够区域。常见实现方式如下：
- 使用
ctx.getImageData(0, 0, width, height)读取上层 canvas 的像素数据 - 遍历像素信息，统计 alpha 值为 0 的像素占比，也就是已经被擦除的区域比例
- 当刮开比例超过设定阈值（例如 60%）时，即可触发中奖逻辑或界面反馈，如弹窗、动画展示、按钮解锁或页面跳转等
还要注意：频繁调用像素读取会带来一定性能开销，因此建议做节流处理（例如每 500ms 检测一次），或者只在 mouseup/touchend 结束后统一检查一次，以兼顾交互体验和页面性能。
