无需登录 数据私有 本地保存

在线刮奖卡 - Canvas涂抹刮开涂层

21
0
0
0

🎫 在线刮奖卡

用鼠标或手指刮开涂层，揭晓你的幸运奖品

🎁 未知奖品
👆 刮开此处揭晓奖品
已刮开
0%
奖品设置
🎁 经典奖品 🍀 幸运抽奖 🔮 神秘宝箱
每个奖品用逗号分隔，重复添加可提高概率
30% (容易)90% (困难)
历史记录
  • 暂无记录，开始刮奖吧 🎉

常见问题与知识点

刮奖卡涂层是如何用 Canvas 实现的？
通过 HTML5 Canvas 的 globalCompositeOperation = 'destination-out' 合成模式，将涂层绘制在奖品内容上方。当用户在 Canvas 上滑动时，使用柔边圆形画笔擦除涂层像素，露出下方的奖品内容。通过采样计算透明像素比例，达到阈值后自动揭晓。
刮奖卡的概率是如何设定的？
奖品从奖品池中随机抽取。默认使用加权随机算法，不同奖品可设置不同权重。例如"谢谢参与"权重较高（更容易抽到），"大奖"权重较低。用户自定义奖品时，可通过重复添加同一奖品来提高其被选中概率。
在手机上刮奖体验如何？
本工具完整支持移动端触摸事件，手指滑动即可刮开涂层。触摸事件使用 passive: false 防止页面滚动，确保刮奖过程流畅不卡顿。Canvas 尺寸会自动适配不同屏幕大小，在手机上也能获得良好体验。
刮开多少比例会自动揭晓？
默认设置为50%，即涂层被刮开一半以上时自动揭晓剩余部分。您可以在设置面板中调整阈值（30%-90%），阈值越低越容易自动揭晓，阈值越高则需要刮开更多面积。
刮奖结果是否公平随机？
是的，每次点击"重新刮奖"都会使用 Math.random() 结合加权算法从奖品池中随机抽取奖品。结果在涂层覆盖之前就已确定，涂层只是隐藏了结果，不会影响奖品本身。整个过程在浏览器本地完成，无服务器参与。
🔧 相关工具