webapp开发优秀插件推荐：刮刮乐H5抽奖特效

最近学堂君在帮别人做了一个非常棒的刮刮乐H5抽奖特效。因为时间有限，要求半天时间弄出来，于是就在网上寻找刮刮乐H5抽奖特效的jquery插件或者是原生js源码。

找了半天，都没有遇到合适的，还让学堂君浪费了好几个小时去调试canvas。

先看看我们的刮刮卡H5的移动界面吧！

实现的原理，简单的跟大家介绍一下。

1、刮奖区域两个Canvas，一个是front ， 一个back ，front遮盖住下面的canvas。

2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监听mouse事件，根据mousemove的x,y坐标，进行擦出front canvas上的矩形区域，然后显示出下面的canvas的效果图。

下面再来聊聊网上那些jquery 刮刮卡的效果是很差的，兼容性比较差。

第一个坑：Lottery.js  （Lottery-master）

这个比较不兼容。出现的坑那就是滚动的时候，出现刮不了奖。刮刮乐H5抽奖特效演示图如下：

学堂君建议不推荐使用。

第二个坑，只能是图片的

中奖的结果是图片的，不能是文字的，动态的。演示的效果如下：

演示效果如下：http://www.jq22.com/yanshi361和http://www.helloweba.com/demo/guaguaka/

这2个都是百度搜索里面靠前的刮刮卡H5特效源码。 代码都很多，对于H5新手来说比较困难。所以，也不推荐使用。除非你是专业的前端工程师。

第三个真正的好用的刮刮乐H5抽奖特效插件：wScratchPad.js

才是学堂强力推荐的方便使用的刮刮乐H5抽奖特效插件。

wScratchPad是jQuery上的一个插件，它能模拟出刮的行为，使你能“擦去”一层覆盖物，这层覆盖物既可是一个图片，也可以是某种颜色涂层。

在这里，学堂君奉上这次的刮刮乐H5抽奖特效的核心源码：

刮刮乐H5抽奖特效：wScratchPad 官网  和插件下载地址：wScratchPad Github

同时分享2个不错的源码全面分析的文章：

1、http://www.webdevs.cn/article/74.html

2、http://blog.csdn.net/lmj623565791/article/details/34089553