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

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

先看看我們的刮刮卡H5的移動(dòng)界面吧！

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

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

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

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

第一個(gè)坑：Lottery.js ?（Lottery-master）

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

學(xué)堂君建議不推薦使用。

第二個(gè)坑，只能是圖片的

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

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

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

第三個(gè)真正的好用的刮刮樂H5抽獎(jiǎng)特效插件：wScratchPad.js

才是學(xué)堂強(qiáng)力推薦的方便使用的刮刮樂H5抽獎(jiǎng)特效插件。

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

在這里，學(xué)堂君奉上這次的刮刮樂H5抽獎(jiǎng)特效的核心源碼：

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

同時(shí)分享2個(gè)不錯(cuò)的源碼全面分析的文章：

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

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