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";
然后绑定鼠标或触摸事件：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
mousedown+mousemove+mouseup（桌面端） -
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 后检查一次。
