Html5實現移動端、PC端 刮刮卡效果

　　剛從南方回來就分了一個刮刮卡效果的頁面，特麼的我在煩惱怎麼用H5去實現這個效果呢，好不容易寫出來了，產品居然說：“既然你可以寫出來這個效果那當然好了，開始我只是打算讓你實現點選就出現呢！”… … 尼瑪幹嘛不早說呢？？？？？真是自找麻煩。既然寫了就分享給大家吧，這個效果其實很早就有了，只是我們不常用到罷了。H5的Canvas我很坦然的說我不會。但是既然工作上需要就需要學習一下了。雖然有demo但是自己寫的時候還是出現了很多的bug。下面給大家說一下實現刮刮卡效果的步驟吧。（ps：按照我自己的demo講了）

　　ggl1.png

　　刮刮卡需求：

　　每一位使用者有三次刮刮卡的機會

　　本次刮刮卡的結果會覆蓋上次的結果

　　刮刮卡的中獎機率呈現為遞增的曲線（保證三次中必須有一次中獎）

　　刮出的結果包含按鈕既（領取獎品 or 再來一次 ）

　　分享活動獎品升級（這裡主要是微信分享的回撥了）

　　我們自己的需求，今天就說怎麼製作刮刮卡，有這樣需求的可以找我要原始碼

　　第一、body建立Canvas

　　<div class="info" id="prize">

　　<span id="prompt"></span>

　　<span class="btn" id="ok">領取獎品</span>

　　<span class="btn" id="no">再來一次</span>

　　</div>

　　<canvas id="c1" class="canvas"></canvas>

　　這裡我們首先建立了一個Canvas，並且在canvas底部加上了刮開後的效果。

　　第二、 頁面載入後開始初始化畫布

　　首先定義一些需要的變數

　　var c1; //畫布

　　var ctx; //畫筆

　　var ismousedown; //標誌使用者是否按下滑鼠或開始觸控

　　var isOk=0; //標誌使用者是否已經刮開了一半以上

　　var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//這是為了不同解析度上配合@media自動調節刮的寬度

　　頁面載入後開始初始化畫布（這樣子就可以在頁面建立一個畫布了）

　　window.>

　　c1 = document.getElementById("c1");

　　//這裡很關鍵，canvas自帶兩個屬性width、height,我理解為畫布的解析度，跟style中的width、height意義不同。

　　//最好設定成跟畫布在頁面中的實際大小一樣

　　//不然canvas中的座標跟滑鼠的座標無法匹配

　　c1.width=c1.clientWidth;

　　c1.height=c1.clientHeight;

　　ctx = c1.getContext("2d");

　　//PC端的處理

　　c1.addEventListener("mousemove",eventMove,false);

　　c1.addEventListener("mousedown",eventDown,false);

　　c1.addEventListener("mouseup",eventUp,false);

　　//移動端的處理

　　c1.addEventListener('touchstart', eventDown,false);

　　c1.addEventListener('touchend', eventUp,false);

　　c1.addEventListener('touchmove', eventMove,false);

　　//初始化

　　initCanvas();

　　}

　　第三、畫灰色的矩形鋪滿

　　function initCanvas(){//網上的做法是給canvas設定一張背景圖片，我這裡的做法是直接在canvas下面另外放了個div

　　//c1.style.backgroundImage="url(中獎圖片.jpg)";

　　ctx.globalCompositeOperation = "source-over";

　　ctx.fillStyle = '#aaaaaa';

　　ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);

　　ctx.fill();

　　ctx.font = "Bold 30px Arial";

　　ctx.textAlign = "center";

　　ctx.fillStyle = "#999999";

　　ctx.fillText("刮一刮",c1.width/2,50);//把這個屬性設為這個就可以做出圓形橡皮擦的效果

　　//有些老的手機自帶瀏覽器不支援destination-out,下面的程式碼中有修復的方法

　　ctx.globalCompositeOperation = 'destination-out';}

　　第四、滑鼠按下 和 觸控開始

　　function eventDown(e){

　　e.preventDefault();

　　ismousedown=true;}

　　第五、滑鼠抬起 和 觸控結束

　　function eventUp(e){

　　e.preventDefault();

　　//得到canvas的全部資料

　　var a = ctx.getImageData(0,0,c1.width,c1.height);

　　var j=0;

　　for(var i=3;i<a.data.length;i+=4){

　　if(a.data[i]==0)j++;

　　}

　　//當被刮開的區域等於一半時，則可以開始處理結果

　　if(j>=a.data.length/8){

　　isOk = 1;

　　}

　　ismousedown=false;

　　}

　　第六、滑鼠移動 和 觸控移動

　　//滑鼠移動 和 觸控移動

　　function eventMove(e){

　　e.preventDefault();

　　if(ismousedown) {

　　if(e.changedTouches){

　　e=e.changedTouches[e.changedTouches.length-1];

　　}

　　var topY = document.getElementById("top").offsetTop;

　　var oX = c1.offsetLeft,

　　oY = c1.offsetTop+topY;

　　var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,

　　y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

　　//畫360度的弧線，就是一個圓，因為設定了ctx.globalCompositeOperation = 'destination-out';

　　//畫出來是透明的

　　ctx.beginPath();

　　ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);

　　//下面3行程式碼是為了修復部分手機瀏覽器不支援destination-out

　　//我也不是很清楚這樣做的原理是什麼

　　c1.style.display = 'none';

　　c1.offsetHeight;

　　c1.style.display = 'inherit';

　　ctx.fill();

　　}

　　if(isOk){

　　var btn = document.getElementsByClassName("btn");

　　for(var i=0; i<btn.length; i++){

　　btn[i].style.zIndex = '3';

　　}

　　document.getElementsByClassName("btn")[0].style.zIndex="3";

　　}

　　}

　　第七： 如果沒有抽中再來一次

　　很明顯，再來一次就是初始化所有的值，畫布重新載入，但是如果有次數限制的需求，務必在這裡計算清楚。

　　注：由於我們要求的比較多今天就不說怎麼計算中獎機率的方法了。有需要的效果版可以單獨找我來要案例。寫錯的地方歡迎指出。