html5 canvas制作刮刮卡

下班后，闲着无事，刚好近期在学习画布相关知识，就写了个刮刮卡的demo练一下手，兼容安卓、IOS哦。高手路过，多多指点！

 

刮刮卡实现原理：

通过canvas绘制一个图片，用户手指触发屏幕时，刮开当前一部分封面图，从而显示正文中的内容。整体运用canvas的globalCompositeOperation属性来实现，关于globalCompositeOperation的用法，有不熟悉的，可以去这里查看。

 

简单介绍一下页面整体结构：

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

 

样式：

html,body { margin: 0; height: 100%; }
.wrap { width: 640px; height: 100%; margin: 0 auto; position: relative; overflow: hidden; }
    .page { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
    .can { z-index: 3; } 
    .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);

首先，定义默认参数：

//默认参数
    var defaults = {
        lineWidth: 50,                //笔触宽度 
        percent: '0.6',               //刮开范围
        slideImg: 'images/2.jpg',     //封面图
        callback: function(){         //刮开后回调函数
            alert('你太棒了，么么哒！')
        }
    };

 

核心逻辑：

说明：刮刮卡效果是借助canvas自身的属性来编写的，所以需要先获取页面中canvas对象，并创建2d绘图环境。

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

然后，创建image对象，img加载成功后，调用canvas的drawImage方法，绘制封面图，并设置绘制的属性，注意下文标部分代码：

var img = new Image();                                  //创建图片对象
                img.src = slideImg;                                     //添加路径
                img.onload = function(){                                //图片加载完成，调用下面方法
                    can.drawImage(img, (640-wid)/2, 0, wid, hei);       //绘制图片
                    can.strokeStyle = 'gray';                           //绘制颜色
                    can.lineWidth = lineWidth;                          //线宽
                    can.lineCap = 'round';                              //样式
                    can.globalCompositeOperation = 'destination-out';   //利用两图相交取透明的原理
                    //绘制完成，调用刮卡事件
                    slide(ths, can);
                }

 

下面是slide方法，主要判断手势、绘制路径与刮开层等效果。当touchend时，计算划开像素点，目标设置为刮开60%时，封面图自动消失。注意下面标注部分代码：

function slide(o,c){
                    o.on('touchstart', function(e){
                        var e = e||e.event;
                        var tou = e.originalEvent.changedTouches[0];    
                        var x = tou.pageX - $(this).offset().left;
                        var y = tou.pageY - $(this).offset().top;

                        if(flag){
                            flag = false;
                            c.moveTo(x, y);
                            c.lineTo(x+1, y+1);
                        }else{
                            c.lineTo(x+1, y+1);
                        }
                        c.stroke();

                        o.on('touchmove.mo', function(e){
                            var e = e||e.event;
                            var tou = e.originalEvent.changedTouches[0];
                            var x = tou.pageX - $(this).offset().left;
                            var y = tou.pageY - $(this).offset().top;

                            c.lineTo(x+1, y+1);
                            c.stroke();
                        })

                        o.on('touchend.mo', function(e){
                            var imgData = c.getImageData(0, 0, 640, hei);
                            var aPx = imgData.width * imgData.height;
                            var num = 0;
                            for(var i=0; i<aPx; i++){
                                if(imgData.data[4*i+3] == 0){
                                    num++;
                                }
                            }

                            if(num>aPx*percent){
                                o.animate({opacity: 0}, 1000, function(){
                                    $(this).remove();

                                    callback();
                                })
                            }

                            o.off('.mo');
                        })

                    })

                }

 至此，整个刮刮功能已讲解完毕，感兴趣的童鞋赶快试一试吧！如有问题，可以通过QQ（863139978）联系。