jQuery+HTML5刮刮乐交互效果

刮刮乐效果的互动体验，靠的是canvas的像素控制，加上jQuery做事件绑定，体验感还挺丝滑的。你可以用鼠标或者手指去“刮”，刮完再触发抽奖逻辑，整个流程一气呵成。

jQuery+HTML5的组合在这类小游戏场景里还挺实用的，代码也不算复杂，适合做活动页或者会员福利的小互动。

像canvas.clearRect、getImageData这些 API 在这里能派上用场，用来判断刮开的百分比，还挺有意思的。如果你想要自定义刮图层或者奖品内容，其实改一改drawImage和刮开判断逻辑就行。

我翻了一圈，下面这些资源还挺值得一看，源码都比较清晰：

• jquery 刮刮乐 html5 - 动效比较流畅
• jQuery HTML5 实现刮刮乐抽奖特效.zip - 整个抽奖流程都封装好了
• HTML5 刮刮乐 - 偏重画布逻辑
• html5Canvas 绘制刮刮乐特效 - 手势比较细

如果你在做活动页，想整点互动但又不想太复杂，用这个还挺省事。记得测试一下移动端触控的兼容性，touchmove 和 mousemove事件要都加上。