刮刮乐核心是遮罩层渐进式擦除而非动画；需用canvas配合globalCompositeOperation='destination-out'实现响应式擦除，移动端须处理touch事件、touch-action及DPR适配。
刮刮乐核心不是动画，是遮罩层的渐进式擦除
Bootstrap 本身不提供刮刮乐功能，也没有内置的“刮开动画”组件。所谓刮刮乐效果，本质是用一层可擦除的遮罩（比如灰色半透明 canvas 或 div）盖在内容上，用户拖动时实时清除遮罩像素或区域。动画感来自擦除过程的连续性与视觉反馈，而非 CSS 过渡或 Bootstrap 的 fade 类。
直接用 Bootstrap 的 class（如 bg-dark opacity-50）做静态遮罩可以，但无法响应鼠标/触控擦除——那只是个“盖子”，不是“可刮层”。必须引入底层操作：canvas 绘图、globalCompositeOperation = 'destination-out'，或用 SVG mask + pointer events 模拟，后者兼容性差且难控制精度。
- 别试图用
transition或@keyframes模拟“刮开”，它无法响应真实拖动轨迹 - 移动端必须监听
touchstart/touchmove，仅靠mousedown会失效 - Bootstrap 的栅格和工具类（如
position-relative、w-100）可辅助布局，但擦除逻辑完全独立
用 canvas 实现可擦除遮罩的最小可行代码
以下是在 Bootstrap 容器内嵌入 canvas 刮刮层的实操要点。假设你已有 Bootstrap 5.x 和一个奖品区域：
<div class="position-relative w-100" style="max-width: 300px; height: 150px;">
<div class="bg-success text-white d-flex align-items-center justify-content-center h-100">
? 一等奖：iPhone 15
</div>
<canvas class="position-absolute top-0 start-0 w-100 h-100"></canvas>
</div>
对应 JS（需在 DOM 加载后执行）：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const rect = canvas.parentElement.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
<p>// 绘制初始遮罩（灰色半透明）
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);</p><p>// 设置擦除笔触
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 30;
ctx.lineCap = 'round';</p><p>let isDrawing = false;
const startDraw = (e) => { isDrawing = true; draw(e); };
const stopDraw = () => { isDrawing = false; ctx.beginPath(); };</p><p>canvas.addEventListener('mousedown', startDraw);
canvas.addEventListener('mousemove', (e) => { if (isDrawing) draw(e); });
canvas.addEventListener('mouseup', stopDraw);
canvas.addEventListener('mouseout', stopDraw);</p><p>// 触控支持
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousedown', {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
});
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
});
canvas.addEventListener('touchend', () => {
const mouseEvent = new MouseEvent('mouseup', {});
canvas.dispatchEvent(mouseEvent);
});</p><p>function draw(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;</p><p>ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}</p>
-
globalCompositeOperation = 'destination-out'是关键：它让新绘制路径“挖掉”原有遮罩，而不是覆盖 -
lineWidth决定刮擦粗细，lineCap = 'round'避免尖角断裂 - 移动端
touch*事件必须e.preventDefault()，否则页面会滚动或缩放 - 不要用
canvas.style.width控制尺寸——它会拉伸画布；始终用canvas.width/canvas.height设置真实像素
如何判断用户是否“刮完”？别依赖面积计算
常见误区是监听擦除像素占比，用 canvas getImageData 遍历所有像素判断透明度——性能极差，尤其在高 DPI 屏幕上。更实用的方式是：设定一个“有效擦除区域阈值”，只检测用户是否在关键区域（如中心 60%）有足够长度的连续擦除路径。
- 记录每次
draw()中的路径点数，超过 20 个点即视为有效刮擦（防误触） - 用
ctx.isPointInPath(x, y)在关键区域（如奖品文字框）做简单命中检测，比全图采样快两个数量级 - 若需精确判定，可在擦除时同步写入一个低分辨率位图数组（如 32×32），每次擦除映射到该数组置 1，最后统计非零元素比例
- Bootstrap 的
toast或modal可在此时触发提示，但逻辑必须与擦除解耦——例如监听自定义事件scratch-complete
兼容性与移动端适配最容易被忽略的三件事
在 iPhone 或 Android 上刮不动、断续、偏移，通常不是代码问题，而是环境配置缺失：
-
canvas父容器必须设touch-action: none，否则 iOS Safari 会拦截 touchmove 事件用于滚动 - 避免在
body上设置overflow: hidden或position: fixed，它会导致getBoundingClientRect()返回错误坐标 - 高 DPR 设备（如 iPhone 14 Pro）需按
window.devicePixelRatio缩放 canvas 像素尺寸，否则擦除线变细、响应迟钝——但不要盲目乘以 DPR，先检测是否已缩放（部分浏览器自动处理）
刮刮乐真正的复杂点不在“怎么画”，而在“怎么让每一次手指滑动都精准对应像素擦除”，尤其是跨设备、跨浏览器时坐标归一化的细节。这些细节没处理好，用户就会觉得“刮不开”或者“刮飞了”。
