Scratch Card 刮刮乐
The grey coating is a canvas painted on top of the reward, and dragging erases it with a composite mode. 灰色涂层是盖在答案上面的一块 canvas，拖动时用混合模式把它擦掉。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Setting globalCompositeOperation = destination-out makes every brush stroke subtract from what is already there instead of drawing on top. The canvas therefore works as a mask, and the hidden content underneath is just normal DOM. mouseleave also clears the drag flag, which prevents the classic bug of erasing after the pointer has left the box. 把 globalCompositeOperation 设成 destination-out，每一笔就在「减去已有内容」，而不是往上画。于是这块 canvas 变成了遮罩，底下藏的东西就是普通 DOM。mouseleave 里也清掉拖拽标志，避免手移出框外还在擦这个经典 bug。
What to change可以改的地方
- 1Enlarge the brush radius for a coarse scratch, shrink it for a coin-scratch feel.
- 2Track how much alpha remains and auto-reveal the rest past 60% removed.
- 1笔刷半径调大是粗暴地刮，调小就有硬币刮涂层的手感。
- 2统计剩余不透明度，擦掉 60% 就自动露出剩下的部分。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。