最近學堂君在幫別人做了一個非常棒的刮刮樂H5抽獎特效。因為時間有限，要求半天時間弄出來，于是就在網(wǎng)上尋找刮刮樂H5抽獎特效的jquery插件或者是原生js源碼。

找了半天，都沒有遇到合適的，還讓學堂君浪費了好幾個小時去調(diào)試canvas。

先看看我們的刮刮卡H5的移動界面吧！

實現(xiàn)的原理，簡單的跟大家介紹一下。

1、刮獎區(qū)域兩個Canvas，一個是front ， 一個back ，front遮蓋住下面的canvas。

2、canvas默認填充了一個矩形，將下面canvas效果圖遮蓋，然后監(jiān)聽mouse事件，根據(jù)mousemove的x,y坐標，進行擦出front canvas上的矩形區(qū)域，然后顯示出下面的canvas的效果圖。

下面再來聊聊網(wǎng)上那些jquery 刮刮卡的效果是很差的，兼容性比較差。

第一個坑：Lottery.js ?（Lottery-master）

這個比較不兼容。出現(xiàn)的坑那就是滾動的時候，出現(xiàn)刮不了獎。刮刮樂H5抽獎特效演示圖如下：

學堂君建議不推薦使用。

第二個坑，只能是圖片的

中獎的結果是圖片的，不能是文字的，動態(tài)的。演示的效果如下：

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

這2個都是百度搜索里面靠前的刮刮卡H5特效源碼。 代碼都很多，對于H5新手來說比較困難。所以，也不推薦使用。除非你是專業(yè)的前端工程師。

第三個真正的好用的刮刮樂H5抽獎特效插件：wScratchPad.js

才是學堂強力推薦的方便使用的刮刮樂H5抽獎特效插件。

wScratchPad是jQuery上的一個插件，它能模擬出刮的行為，使你能“擦去”一層覆蓋物，這層覆蓋物既可是一個圖片，也可以是某種顏色涂層。

在這里，學堂君奉上這次的刮刮樂H5抽獎特效的核心源碼：

刮刮樂H5抽獎特效：wScratchPad 官網(wǎng)? 和插件下載地址：wScratchPad Github

同時分享2個不錯的源碼全面分析的文章：

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

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