html5 canvas製做刮刮卡

下班後，閒着無事，恰好近期在學習畫布相關知識，就寫了個刮刮卡的demo練一下手，兼容安卓、IOS哦。高手路過，多多指點！

 

刮刮卡實現原理：

經過canvas繪製一個圖片，用戶手指觸發屏幕時，刮開當前一部分封面圖，從而顯示正文中的內容。總體運用canvas的globalCompositeOperation屬性來實現，關於globalCompositeOperation的用法，有不熟悉的，能夠去這裏查看。

 

簡單介紹一下頁面總體結構：

1 <div class="wrap">
2 　　<canvas class="page can" id="can" width="640" height="1136"></canvas>
3 　　<div class="page index"><img src="images/1.jpg" /></div>
4 </div>

 

樣式：

1 html,body { margin: 0; height: 100%; }
2 .wrap { width: 640px; height: 100%; margin: 0 auto; position: relative; overflow: hidden; }
3     .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
4     .can { z-index: 3; } 
5     .index img { width: 100%; height: 100%; }

 

引用JS：

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/scratch.js"></script>

 

下面， 詳細介紹一下關於scratch.js的具體實現思路與方法：

經過JS閉包引用：

;(function($){
　　//主體代碼
　　//...
})(jQuery);

首先，定義默認參數：

1 //默認參數
2     var defaults = {
3         lineWidth: 50,                //筆觸寬度 
4         percent: '0.6',               //刮開範圍
5         slideImg: 'images/2.jpg',     //封面圖
6         callback: function(){         //刮開後回調函數
7             alert('你太棒了，麼麼噠！')
8         }
9     };

 

核心邏輯：

說明：刮刮卡效果是藉助canvas自身的屬性來編寫的，因此須要先獲取頁面中canvas對象，並建立2d繪圖環境。

var can = ths.get(0).getContext('2d');

而後，建立image對象，img加載成功後，調用canvas的drawImage方法，繪製封面圖，並設置繪製的屬性，注意下文標部分代碼：

 1 var img = new Image();                                  //建立圖片對象
 2                 img.src = slideImg;                                     //添加路徑
 3                 img.onload = function(){                                //圖片加載完成，調用下面方法
 4                     can.drawImage(img, (640-wid)/2, 0, wid, hei);       //繪製圖片
 5                     can.strokeStyle = 'gray';                           //繪製顏色
 6                     can.lineWidth = lineWidth;                          //線寬
 7                     can.lineCap = 'round';                              //樣式
 8                     can.globalCompositeOperation = 'destination-out';   //利用兩圖相交取透明的原理
 9                     //繪製完成，調用刮卡事件
10                     slide(ths, can);
11                 }

 

下面是slide方法，主要判斷手勢、繪製路徑與刮開層等效果。當touchend時，計算劃開像素點，目標設置爲刮開60%時，封面圖自動消失。注意下面標註部分代碼：

 1 function slide(o,c){
 2                     o.on('touchstart', function(e){
 3                         var e = e||e.event;
 4                         var tou = e.originalEvent.changedTouches[0];    
 5                         var x = tou.pageX - $(this).offset().left;
 6                         var y = tou.pageY - $(this).offset().top;
 7 
 8                         if(flag){
 9                             flag = false;
10                             c.moveTo(x, y);
11                             c.lineTo(x+1, y+1);
12                         }else{
13                             c.lineTo(x+1, y+1);
14                         }
15                         c.stroke();
16 
17                         o.on('touchmove.mo', function(e){
18                             var e = e||e.event;
19                             var tou = e.originalEvent.changedTouches[0];
20                             var x = tou.pageX - $(this).offset().left;
21                             var y = tou.pageY - $(this).offset().top;
22 
23                             c.lineTo(x+1, y+1);
24                             c.stroke();
25                         })
26 
27                         o.on('touchend.mo', function(e){
28                             var imgData = c.getImageData(0, 0, 640, hei); 29                             var aPx = imgData.width * imgData.height; 30                             var num = 0;
31                             for(var i=0; i<aPx; i++){
32                                 if(imgData.data[4*i+3] == 0){
33                                     num++;
34                                 }
35                             }
36 
37                             if(num>aPx*percent){
38                                 o.animate({opacity: 0}, 1000, function(){
39                                     $(this).remove();
40 
41                                     callback();
42                                 })
43                             }
44 
45                             o.off('.mo');
46                         })
47 
48                     })
49 
50                 }

 至此，整個刮刮功能已講解完畢，感興趣的童鞋趕快試一試吧！若有問題，能夠經過QQ（863139978）聯繫。