Canvas刮刮卡效果本质是用globalCompositeOperation="destination-out"模式“挖除”遮罩层像素，而非覆盖或清除；需设涂层为纯色、适配高DPR、禁用触摸默认行为，并通过getImageData检测alpha为0的像素占比判断刮开完成。
Canvas 刮刮卡效果不是靠“擦除”图层，而是用 globalCompositeOperation 控制像素混合——不理解这点，90% 的实现会卡在刮不透明、刮完留残影或移动端失效上。
canvas 如何用 globalCompositeOperation = "destination-out" 实现刮开效果
核心逻辑是：先画背景（如中奖文字/图片），再盖一层不透明涂层（比如灰色 fillRect），最后用笔触（鼠标/手指）以 "destination-out" 模式“挖掉”涂层像素，露出底层内容。
关键点：
-
destination-out表示“只保留源图像未与目标重叠的部分”，即画笔经过处，涂层被完全清空（alpha=0），不是变浅或覆盖其他颜色 - 必须在绘制涂层后、开始刮擦前调用
ctx.globalCompositeOperation = "destination-out"，且之后所有绘图操作都受其影响 - 涂层必须是纯色（如
ctx.fillStyle = "#ccc"）或纯色渐变；若涂层本身带透明度（rgba(0,0,0,0.5)），刮擦后会残留半透灰影 - 移动端需监听
touchstart/touchmove并阻止默认行为，否则触发页面滚动导致刮断连
为什么 clearRect() 或 strokeStyle = "transparent" 刮不出来
这两个是新手最常踩的坑：clearRect() 清的是整个 canvas 像素（包括底层背景），不是“仅清涂层”；而把 strokeStyle 设为透明色，本质仍是“画一层透明覆盖”，无法触发像素剔除。
立即学习“前端免费学习笔记（深入）”；
典型错误现象：
- 刮过区域变白或闪一下——用了
clearRect()，清掉了背景内容 - 刮不动、线条发虚——用
strokeStyle = "rgba(0,0,0,0)"，实际画的是 0 透明度的黑线，涂层没被移除 - PC 正常但手机刮不连续——没在
touchmove中调用event.preventDefault()，触摸事件被浏览器劫持去滚动了
如何适配高 DPI 屏幕（Retina / iPhone）避免刮痕模糊
Canvas 在高清屏上默认以物理像素渲染，但 CSS 设置的宽高是逻辑像素，直接按 clientX/clientY 绘图会导致坐标错位、线条发虚甚至刮不到。
修复方式（必须同步做）：
- 读取设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas 实际宽高：
canvas.width = canvas.clientWidth * dpr；canvas.height = canvas.clientHeight * dpr - 用
ctx.scale(dpr, dpr)缩放绘图上下文，让逻辑坐标（如moveTo(x, y)）仍可直接用 client 坐标 - 涂层和刮擦路径都必须在这套缩放后执行，否则涂层分辨率低，刮出来锯齿明显
刮刮卡完成检测：怎么判断用户“刮完了”
不能依赖刮擦面积阈值（如“刮掉 70% 像素”），因为 canvas 像素级检测性能差且易误判。更稳的方式是监听涂层剩余不透明像素密度变化。
实操建议：
- 用
ctx.getImageData(0, 0, width, height)取涂层区域像素数据（注意：必须在涂层绘制完成后、刮擦过程中定期取） - 遍历
data数组，每 4 字节一组（RGBA），检查data[i+3]（alpha 值）是否 - 统计 alpha
- 检测频率控制在
requestAnimationFrame回调中，避免高频读取拖慢主线程
真正难的不是画一条刮痕，而是让涂层、刮擦、DPI、完成判定四者对齐——少对一环，用户就会觉得“刮不干净”“反应迟钝”或“手机根本刮不了”。
