手机刮刮卡

最新推荐文章于 2022-09-29 19:38:47 发布

转载最新推荐文章于 2022-09-29 19:38:47 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/beiz/p/5069682.html

本文介绍了一种基于HTML5 Canvas实现的刮刮卡效果，通过触摸屏幕来逐步揭示隐藏的奖品图片。该实现包括了中奖几率的控制、触摸事件的监听以及刮开区域的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 = ['images/1.jpg', 'images/2.jpg'],//控制中奖几率
        prizeImg = aPrizeList[Math.floor(Math.random() * aPrizeList.length)];

    scratch(oCanvas, prizeImg, 0.3, function(){
        alert('成功！');
    });

    /**
     * 刮刮卡
     * @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>

效果如图：