canvas实现刮刮乐的效果

最新推荐文章于 2024-05-11 12:32:41 发布

大叶豌豆

最新推荐文章于 2024-05-11 12:32:41 发布

阅读量1.1k

点赞数 2

分类专栏： HTML5 文章标签： html5 canvas jquery 刮刮乐

本文链接：https://blog.csdn.net/dayewandou/article/details/78241332

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

很多网站上都有刮刮乐的效果，这个呢，也不是很完善，大神们可以多提提意见哟！！豌豆拜上

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            background: url("guaguale.jpg");
        }
    </style>
</head>
<body>
    <!-- 画布的大小和图片的大小是一样的哟-->
    <canvas width="300" height="300"></canvas>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');

        //逻辑部分
        //1.画出一个与画布一样大小的填充矩形
        ctx.fillStyle='#c1c1c1';
        ctx.fillRect(0,0,300,300);
        //当绘制两个图形的时候，两个图像有相交的部分时，显示旧图形与新图形不想交的部分
        ctx.globalCompositeOperation='destination-out';
        //2.鼠标按下并移动的时候以鼠标经过的点为圆心划圆
        $('canvas').on('mousedown',function(){
            $('canvas').on('mousemove',function(e){
                //4.解决最随意画出两个圆，两个圆自动相连的bug
                ctx.beginPath();
                //3.获取事件对象，通过事件对象获取鼠标在画布中的坐标，通过坐标来划圆
                ctx.fillStyle='#fff';
                ctx.arc(e.offsetX,e.offsetY,30,0,Math.PI*2);
                ctx.fill();
                //6.判断用户涂抹一半剩下的自动消失
                    //6.1获取矩形中所有像素点rgba的值组成的数组
                var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
                    //6.2声明一个变量来对被擦除的点进行计数
                var sum=0;
                    //6.3循环数组中的rgba中的所有的a值，判断a值如果为0时代表已经被用户擦除，sum++
                for(var i=3;i<data.length;i+=4){
                    if(data[i]==0){
                        sum++;
                    }
                }
                    //6.4当sum中的数值超过画布中像素点的一半时，清除整个画布中的矩形，并且解除事件处理程序
                if(sum>=canvas.width*canvas.height/2){
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    $('canvas').off('mousedown mousemove');
                }
            })
        }).on('mouseup',function(){
            //5.解决点击一次，然后移动就可以消除的bug
            $('canvas').off('mousemove');
        });
    </script>
</body>
</html>

实现效果：
这里写图片描述

效果就是这个样子了，随便贴了一张图，哈哈
刮刮乐原图：
这里写图片描述

后面没有用原生js，用的jq，这样写起来简单方便点，用js也可以，有喜欢用js的可以留言一起交流哟！拜啦~~

大叶豌豆

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
canvas实现刮刮乐的效果

很多网站上都有刮刮乐的效果，这个呢，也不是很完善，大神们可以多提提意见哟！！豌豆拜上<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas{ background: url("guaguale.jpg");
复制链接

扫一扫

专栏目录