Canvas画布(二)刮刮卡案例(刮奖)

先上效果图：(前方高能)
在这里插入图片描述
案例代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
    
    
        margin: 0;
        padding: 0;
        height: 100%;
    }

    canvas {
    
    
        position: absolute;
        left: 0;
        top: 0;
    }

    #wrap,
    ul,
    li {
    
    
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
    
    
        background-image: url('./image/10.jpg');
        background-size: 100% 100%;
    }
</style>

<body>
    <div id="wrap">
        <canvas id="mycanvas">
            <span>您的浏览器不支持canvas,请更新！</span>
        </canvas>
        <ul>
            <li></li>
        </ul>
    </div>
</body>
<script>
    window.onload = function () {
    
    
        let canvas = document.querySelector('#mycanvas')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        window.addEventListener('resize', function () {
    
     //画布大小跟随窗口变
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
        })

        if (!canvas.getContext) return; //检查是否支持绘制对象
        let ctx = canvas.getContext('2d') //获取绘制对象

        let image = new Image()
        image.src = './image/12.jpg'
        image.onload = function () {
    
    
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
            canvas.addEventListener('touchstart', function (e) {
    
    
                e = e || window.event
                let touchC = e.changedTouches[0]
                let x = touchC.clientX
                let y = touchC.clientY

                ctx.lineWidth = 50
                ctx.lineJoin - 'round'
                ctx.lineCap = 'round'
                ctx.globalCompositeOperation = 'destination-out'; //用来合成
                ctx.moveTo(x, y)
                ctx.lineTo(x + 1, y + 1)
                ctx.stroke()
            })
            canvas.addEventListener('touchmove', function (e) {
    
    
                e = e || window.event
                let touchC = e.changedTouches[0]
                let x = touchC.clientX
                let y = touchC.clientY
                ctx.lineTo(x, y)
                ctx.stroke()
            })
            canvas.addEventListener('touchend', function (e) {
    
    
                //获取整个画布的像素数据
                let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                let flag=0//像素点多少个
                // 获取所有像素点
                let allPx=imageData.width*imageData.height
                for (let i = 0; i < allPx; i++) {
    
    
                    if(imageData.data[4*i+3]===0){
    
    //判断小点是否透明
                        flag++
                    }
                    
                }
                if(flag>allPx/2){
    
    
                    canvas.style.opacity=0
                    canvas.style.transition='1s'
                }
            })
            canvas.addEventListener('transitionend', function (e) {
    
    
               this.remove()//过渡完移除canvas
            })
        }


    }
</script>

</html>
Canvas画布(二)刮刮卡案例(刮奖)

猜你喜欢
