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）联系。