刮刮卡效果本质是canvas实时绘制可擦除遮罩层，通过destination-out合成模式挖除像素，并用getImageData统计透明像素占比判断达标，需处理高DPR对齐、事件兼容及性能节流。
刮刮卡效果本质是「局部遮罩 + 鼠标/触摸擦除」，不是靠 CSS 动画或 SVG 模拟，而是用 canvas 实时绘制可擦除图层——否则无法精准响应拖拽、无法判断刮开面积是否达标。
用 canvas 实现可擦除遮罩层
核心思路：在奖品图上盖一层纯色（如灰色）canvas，监听 mousedown/touchstart + mousemove/touchmove，在遮罩层上用透明色“画”出擦除轨迹。
- 必须设
canvas的width和height为实际像素值（不能只靠 CSS 缩放），否则擦除坐标错乱 - 擦除时用
globalCompositeOperation = 'destination-out'，这是关键——它让新绘制内容“挖掉”原有像素，而不是覆盖 - 移动端需同时处理
touchstart/touchmove，并调用event.preventDefault()防止页面滚动干扰
判断刮开区域是否达标（比如 ≥ 50%）
不能靠视觉估算，得真实计算已擦除像素占比。最稳的方式是：每帧擦除后，用 ctx.getImageData(0, 0, width, height) 读取遮罩层像素数据，统计 alpha 值为 0 的像素数。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 注意：
getImageData返回的是Uint8ClampedArray，每 4 个值一组（R,G,B,A），只需检查第 3 位（A）是否为 0 - 频繁读取性能差，建议节流——比如每 300ms 计算一次，或只在
mouseup/touchend时最终校验 - 若奖品图本身带透明区域，遮罩层必须和原图尺寸严格一致，否则比对失准
兼容性与降级处理
老版 iOS Safari 对 canvas 的 destination-out 在 retina 屏下偶有渲染残留；IE 完全不支持 touch 事件。稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 检测
'ontouchstart' in window决定绑定哪套事件，PC 端 fallback 到mouse系列 - 对不支持
canvas或getImageData的环境（如 IE9-），直接显示完整奖品图，加文字提示「系统自动揭晓」 - 避免用
filter: blur()或opacity模拟刮刮效果——它们无法精确控制擦除区域，且无法触发面积判断逻辑
真正难的不是画出刮痕，而是擦除坐标的设备无关映射、高 DPR 屏幕下的像素对齐、以及大面积擦除时的性能抖动——这些细节不处理，用户会感觉“刮不动”或“刮了没反应”。
