首页 > 代码库 > 使用HTML5实现刮刮卡效果

使用HTML5实现刮刮卡效果

2024-09-14 15:07:51   218人阅读

本文转载www.helloweba.com  谢谢写这个代码的人

实现刮奖效果 使用 html5

实现效果：

技术分享

代码如下：

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;initial-scale=1.0">
    <title></title>
    <style type="text/css">
        .demo{
            width: 320px;margin: 10px auto 20px;
            min-height: 300px;
        }

    </style>
</head>
<body>
    <div class="demo">
        <canvas></canvas>
    </div>
<script type="text/javascript">
    var bodyStyle = document.body.style;

    bodyStyle.mozUserSelect = "none";
    bodyStyle.webkitUserSelect = "none";

    var img = new Image();
    var canvas = document.querySelector("canvas");
    canvas.style.backgroundColor = "transparent";
    canvas.style.position = "absolute";
    var imgs = [‘p_0.jpg‘,"p_1.jpg"];
    var num = Math.floor(Math.random()*2);
    img.src =  imgs[num];

    img.addEventListener("load", function(){
        var ctx;
        var w = img.width,
            h = img.height;
        var offsetX = canvas.offsetLeft,
            offsetY = canvas.offsetTop;
        var mousedown = false;

        function layer(ctx){
            ctx.fillStyle = "gray";
            ctx.fillRect(0,0,w,h);
        }
        function eventDown(e){
            e.preventDefault();
            mousedown = true;
        }
        function eventUp(e){
            e.preventDefault();
            mousedown = false;
        }
        function eventMove(e){
            e.preventDefault();
            if(mousedown){
                if(e.changedTouches){
                    e =  e.changedTouches[e.changedTouches.length -1];
                }
                var x = (e.clientX +  document.body.scrollLeft || e.pageX) - offsetX || 0,
                y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                with(ctx){
                    beginPath()
                    arc(x,y,10,0,Math.PI * 2);
                    fill();
                }
            }
        }
        canvas.width = w;
        canvas.height = h;
        canvas.style.backgroundImage = ‘url(‘+img.src+‘)‘;
        ctx = canvas.getContext("2d");
        ctx .fillStyle = "transparent";
        ctx.fillRect(0, 0, w, h);
        layer(ctx);

        ctx.globalCompositeOperation = "destination-out";//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
        canvas.addEventListener("touchstart", eventDown);
        canvas.addEventListener("touchend",eventUp);
        canvas.addEventListener(‘touchmove‘, eventMove);
        canvas.addEventListener("mousedown", eventDown);
        canvas.addEventListener("mouseup", eventUp);
        canvas.addEventListener("mousemove", eventMove)
    })
</script>
</body>
</html>

使用HTML5实现刮刮卡效果


联系
我们