刮刮卡效果本质是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 屏幕下的像素对齐、以及大面积擦除时的性能抖动——这些细节不处理，用户会感觉“刮不动”或“刮了没反应”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！