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); 29                             var aPx = imgData.width * imgData.height; 30                             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）聯系。