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

web前端小龚

已于 2023-10-11 10:30:11 修改

阅读量968

点赞数

分类专栏： canvas 文章标签： canvas javascript js css html5

于 2021-03-02 11:22:37 首次发布

本文链接：https://blog.csdn.net/qq_41560520/article/details/114281197

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上效果图：(前方高能)
在这里插入图片描述
案例代码：

<!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>

web前端小龚

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
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&
复制链接

扫一扫