【回忆1314】抽奖之手机刮刮卡

浏览数：39 / 时间：2015年06月11日

直接看效果点这里（记得模拟手机噢）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title> 刮刮卡 </title>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
<script>
    var oCanvas = document.getElementById(‘canvas‘),
        aPrizeList = [‘http://ued.taobao.org/blog/wp-content/themes/taobaoued/images/logo.png‘, ‘http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png‘],
        prizeImg = aPrizeList[Math.floor(Math.random() * aPrizeList.length)];

    scratch(oCanvas, prizeImg, 0.8, function(){
        alert(‘end.‘);
    });

    /**
     * 刮刮卡
     * @param oCanvas   canvas绘图对象
     * @param prizeImg  中奖图片
     * @param scale     刮开区域占比
     * @param callback  刮开后执行的函数
     */
    function scratch(oCanvas, prizeImg, scale, callback){
        if(!oCanvas.getContext) return;
        var w = oCanvas.getAttribute(‘width‘),
            h = oCanvas.getAttribute(‘height‘),
            ctx = oCanvas.getContext(‘2d‘),
            fn = callback || function(){};

        // 设置奖品图片
        oCanvas.style.background = ‘url(‘+ prizeImg +‘) 0 0/cover no-repeat‘;

        // 绘制灰色刮奖区域
        ctx.fillStyle = "#999";
        ctx.fillRect(0,0, w, h);

        // 设置重叠显示方式
        ctx.globalCompositeOperation="destination-out";

        // 绑定事件
        oCanvas.addEventListener(‘touchstart‘, function(){

            // 按下并滑动
            oCanvas.addEventListener(‘touchmove‘, function(e){
                e.preventDefault();
                var x = e.targetTouches[0].clientX + document.body.scrollLeft - oCanvas .offsetLeft,
                    y = e.targetTouches[0].clientY + document.body.scrollTop - oCanvas.offsetTop;
                ctx.beginPath();
                ctx.arc(x, y, 15, 0, Math.PI*2);
                ctx.fill();
                ctx.closePath();
            });

            oCanvas.addEventListener(‘touchend‘, function(e){
                e.preventDefault();
                var count = 0,
                    datas = ctx.getImageData(0,0,w,h);
                for (var i = 0, len = datas.data.length; i < len; i++) {
                    if (datas.data[i] == 0) {
                        count++;
                    }
                }
                if (count >= datas.data.length * scale) {
                    fn();
                    ctx.fillRect(0,0,w,h);
                }

                oCanvas.removeEventListener(‘touchmove‘);
                oCanvas.removeEventListener(‘touchend‘);
            });
        });
    }


</script>
</body>
</html>