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

直接看效果点这里(记得模拟手机噢)

<!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(){},
       bEnd = false; // 防止touchend多次执行回调
// 设置奖品图片 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 && !bEnd) { fn(); ctx.fillRect(0,0,w,h);
            bEnd = true; }
}); }); } </script> </body> </html>

 

 

 

 

你可能感兴趣的:(手机)