最可控的刮刮乐实现是canvas手动绘制蒙层。需用selectSelectorQuery获取DOM尺寸后再创建ctx，设置globalCompositeOperation为destination-out实现擦除，用arc填充代替clearRect，节流draw调用，采样估算刮开面积，阈值设宽松些以保证体验。
直接用 canvas + 手动绘制蒙层是最可控、兼容性最好、也最不容易翻车的方式。别碰所谓“纯 CSS 刮刮乐”或“div 层叠模拟”，在真机上要么卡顿、要么刮不掉、要么安卓 iOS 表现不一致。
uni.createCanvasContext 绘制蒙层必须等 DOM 尺寸就绪
很多人一上来就 uni.createCanvasContext('myCanvas')，结果 ctx.fillRect 画出来位置偏移、大小错乱，甚至完全看不见——因为 canvas 宽高还没从 view 元素里读到。
- 必须用
uni.createSelectorQuery()主动查.canvasView或包裹容器的boundingClientRect - 查完再调
uni.createCanvasContext，且建议加setTimeout(..., 20)避开 Vue 渲染队列抖动（尤其在onShow里） - 宽高值要存到 data 里（如
width/height），不能靠event.detail.x反推，否则多点触控或缩放下会失准
touchmove 里擦除要用 ctx.globalCompositeOperation = 'destination-out'
这是最关键的一步。默认的 fillRect 或 stroke 是“覆盖”，而刮刮乐要的是“挖空”。不设这个合成模式，你划过去只是盖一层新颜色，蒙层根本没被擦掉。
- 务必在每次绘制前设：
ctx.globalCompositeOperation = 'destination-out' - 擦除笔触推荐用
arc+fill（圆头更自然），半径用touchSize控制（比如 30–50），太小刮得费劲，太大边缘毛糙 - 不要用
clearRect——它清的是整个矩形区域，无法响应手指轨迹 - 安卓低端机上频繁调
ctx.draw(true)会卡，建议节流（如requestAnimationFrame或时间间隔 ≥ 16ms）
判断刮开面积用 getImageData 不现实，改用像素采样估算
想精确算“已刮区域占总面积比例”？别试 ctx.getImageData —— uni-app 的 canvas 暂不支持该 API（H5 环境部分支持，小程序和 App 完全不可用），调了直接报错或返回空数据。
- 实用做法：在蒙层上随机打 20–50 个采样点（
Math.random() * width坐标），用ctx.isPointInPath或提前缓存“已擦坐标集合”做碰撞检测 - 更轻量的方案：记录所有擦除路径的 bounding box 并粗略合并，算覆盖矩形面积 / 总面积（误差 ±15%，但够用）
-
percentage: 70这类阈值建议设宽松些（65–75），避免用户明明快刮完了却卡在“未达标”状态
真正难的不是画一块能刮的黑板，而是让手指划过时响应跟手、不延迟、不跳变，且在 iOS 微信、安卓 QQ、App 端都保持一致。这些细节藏在 touchstart/touchmove 的事件处理节奏、canvas draw 的触发时机、以及蒙层重绘的粒度控制里——调参比写逻辑花的时间还多。
