canvas实现刮刮卡

最新推荐文章于 2022-06-12 16:02:39 发布

weixin_44552543

最新推荐文章于 2022-06-12 16:02:39 发布

阅读量82

点赞数

<!DOCTYPE html>
<html lang="en">
<meta>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  </meta>
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            overflow:hidden;
        }
        #wrap, ul,ul li{
            height: 100%;
        }
        canvas{
            position:absolute;
            left: 0;
            top: 0;
            transition: 1s;
        }
        ul li{
            background: url(img01.jpeg);
            background-size: 100%,100%;
        }

    </style>
</head>
<body>
<div id="wrap">
    <canvas id="canvas"></canvas>
    <ul>
        <li></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    window.onload=function () {
        var canvas=document.getElementById("canvas");
        canvas.width=document.documentElement.clientWidth;
        canvas.height=document.documentElement.clientHeight;
        if (canvas.getContext){
            var ctx=canvas.getContext("2d")
            var img=new Image();
            img.src="img03.jpeg"
            img.onload=function () {
                draw();
            }
            function draw() {
                 var flag=0
                ctx.drawImage(img,0,0,canvas.width,canvas.height)
                canvas.addEventListener("touchstart",function (ev) {
                   ev=ev||event;
                   var touchC=ev.changedTouches[0];
                   var x=touchC.clientX-canvas.offsetLeft;
                   var y=touchC.clientY-canvas.offsetTop;
                    //总体canvas样式
                    ctx.lineWidth=40;
                    ctx.lineCap="round";
                    ctx.lineJoin="round"
                    ctx.globalCompositeOperation="destination-out";

                   ctx.save();
                   ctx.beginPath();
                   ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                   ctx.stroke()
                   ctx.restore();
                })

                canvas.addEventListener("touchmove",function (ev) {
                    ev=ev||event;

                    var touchC=ev.changedTouches[0];
                    var x=touchC.clientX-canvas.offsetLeft;
                    var y=touchC.clientY-canvas.offsetTop;


                    ctx.save();
                    //ctx.globalCompositeOperation="destination-out";
                  //不能 ctx.beginPath();
                   // ctx.arc(x,y,20,0,360*Math.PI/180);
                    ctx.lineTo(x,y)
                    ctx.stroke()
                    ctx.restore();
                })

                canvas.addEventListener("touchend",function () {
                    var imgData=ctx.getImageData(0,0,canvas.width,canvas.height)
                    var allPx=imgData.width*imgData.height;
                    for (var i=0;i<allPx;i++){
                        if (imgData.data[4*i+3]===0){
                            flag++
                        }
                    }
                    if(flag>=allPx/2){
                        canvas.style.opacity=0;
                    }
                })
                canvas.addEventListener("transitionend",function () {
                    this.remove();
                })
            }
        }
     }
</script>
</html>

在这里插入图片描述

weixin_44552543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现刮刮卡

<!DOCTYPE html><html lang="en"><meta> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> </meta&g...
复制链接

扫一扫