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

標籤：

 

刮刮卡需求 ：

 

1. 每一位使用者有三次刮刮卡的機會
2. 本次刮刮卡的結果會覆蓋上次的結果
3. 刮刮卡的中獎幾率呈現為遞增的曲線（保證三次中必須有一次中獎）
4. 刮出的結果包含按鈕既（領取獎品 or 再來一次 ）
5. 分享活動獎品升級（這裡主要是分享的回調了）
6. 我們自己的需求，今天就說怎麼製作刮刮卡，有這樣需求的可以找我要源碼

 第一、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"]);v//這是為了不同解析度上配合@media自動調節刮的寬度

 

 

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

 

  

window.onload = function(){     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";     } }

 

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

 

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