canvas刮刮乐效果（pc端&H5、zepto-touchmove）

一、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>

二、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