html5 canvas制作刮刮卡

全栈程序员-站长 • 2025年10月15日下午8:15 • 未分类 • 阅读 3

下班后，闲着无事，刚好近期在学习画布相关知识，就写了个刮刮卡的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：

下面，详细介绍一下关于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 }