canvas刮刮樂效果（pc端&H五、zepto-touchmove）

1、html

<div id="canvasArea" style="width:300px;height:200px;position:relative;">
    <div style="width:300px;height:200px;background: #3083e1;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等獎</div>
    <canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
</div>

2、js

<script src="../js/zepto.min.js"></script>
<script>
    (function(){
        // 事件綁定
        window.bindHandler = (function() {
            if (window.addEventListener) {// 標準瀏覽器
                return function(elem, type, handler) {
                    // elem:節點    type:事件類型   handler:事件處理函數
                    // 最後一個參數爲true:在捕獲階段調用事件處理程序;爲false:在冒泡階段調用事件處理程序。注意：ie沒有這個參數
                    elem.addEventListener(type, handler, false);
                }
            } else if (window.attachEvent) {// IE瀏覽器
                return function(elem, type, handler) {
                    elem.attachEvent("on" + type, handler);
                }
            }
        }());

        // 事件解除
        window.removeHandler = (function() {
            if (window.removeEventListener) {// 標準瀏覽器
                return function(elem, type, handler) {
                    elem.removeEventListener(type, handler, false);
                }
            } else if (window.detachEvent) {// IE瀏覽器
                return function(elem, type, handler) {
                    elem.detachEvent("on" + type, handler);
                }
            }
        }());

        var canvas = document.getElementById("canvas");
//       建立context對象
        var ctx = canvas.getContext("2d");
//        刮獎
        var brush = function () {
            ctx.clearRect(event.offsetX,event.offsetY,20,20);
        };

//        功能實現區

//        繪製刮獎區域
        ctx.fillStyle = '#A9AB9D';
        ctx.fillRect(10,10,280,180);
        ctx.fillStyle = '#fff';
        ctx.font = '50px Arial';
        ctx.fillText('刮獎區',75,115);

        //2. 爲canvas元素onmousedown和onmouseup事件
        canvas.onmousedown = function(){
            // 鼠標按下時 - 綁定鼠標跟隨事件
            bindHandler(canvas,'mousemove',brush,false);
        };
        canvas.onmouseup = function(){
            // 中止刮獎功能 - 解綁鼠標跟隨事件
            removeHandler(canvas,"mousemove",brush,false);
        };

        //移動端手滑動
        function lottery(x,y,c){
            c.clearRect(x,y,20,20);

        }
        canvas.addEventListener('touchmove',function(event){
            //若是觸屏時只有一隻手
            if(event.targetTouches.length == 1){
                event.preventDefault();// 阻止瀏覽器默認事件，重要
                var touch = event.targetTouches[0];
                var canavOffest = $(canvas).offset();
                var canvX = Math.floor(touch.pageX - canavOffest.left);
                var canvY = Math.floor(touch.pageY-canavOffest.top);
                lottery(canvX,canvY,ctx);
            }

        },false);
    })(Zepto);

</script>

注：參考於http://www.cnblogs.com/puyongsong/p/6027533.html