资讯详情先看看我们的刮刮卡H5的移动界面吧!
实现的原理，简单的跟大家介绍一下。
1、刮奖区域两个Canvas，一个是front ， 一个back ，front遮盖住下面的canvas。学h5的网站
2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mousemove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。
下面再来聊聊网上那些jquery 刮刮卡的效果是很差的，兼容性比较差。
第一个坑：Lottery.js (Lottery-master)
这个比较不兼容。出现的坑那就是滚动的时候，出现刮不了奖。刮刮乐H5抽奖特效演示图如下h5实战：
学堂君建议不推荐使用。
第二个坑，只能是图片的
中奖的结果是图片的，不能是文字的，动态的。演示的效果如下：
演示效果如下：http://www.jq22.com/yanshi361和http://www.helloweba.com/demo/guaguaka/
这2个都是百度搜索里面靠前的刮刮卡H5特效源码。 代码都很多，对于H5新手来说比较困难。所以，也不推荐使用。除非你是专业的前端工程师。
第三个真正的好用的刮刮乐H5抽奖特效插件：wScratchPad.js
才是学堂强力推荐的方便使用的刮刮乐H5抽奖特效插件。
wScratchPad是jQuery上的一个插件，它能模拟出刮的行为，使你能“擦去”一层覆盖物，这层覆盖物既可是一个图片，也可以是某种颜色涂层h5容易吗。
在这里，学堂君奉上这次的刮刮乐H5抽奖特效的核心源码：
刮刮乐H5抽奖特效：wScratchPad 官网 和插件下载地址：wScratchPad Github
同时分享2个不错的源码全面分析的文章：
1、http://www.webdevs.cn/article/74.html
2、http://blog.csdn.net/lmj623565791/article/details/34089553
