html实现刮刮乐

刘憬庐

已于 2022-02-03 14:01:55 修改

阅读量868

点赞数

文章标签： html 前端

于 2022-02-03 13:49:03 首次发布

本文链接：https://blog.csdn.net/ljl20120815/article/details/122775258

版权

本文介绍了如何使用HTML和JavaScript在页面上创建一个动态画布，用户可以通过鼠标操作画圆并实现半透明擦除效果。教程包含HTML结构、CSS样式和JavaScript逻辑，适合初学者学习HTML5 canvas基础应用。

摘要由CSDN通过智能技术生成

不会运行HTML文件的可以看我以前的文章：HTML入门_ljl20120815的博客-CSDN博客

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            background: url("guaguale.jpg");
        }
    </style>
</head>
<body>
    <!-- 画布的大小和图片的大小是一样的哟-->
    <canvas width="1239" height="927"></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,1239,927);
        //当绘制两个图形的时候，两个图像有相交的部分时，显示旧图形与新图形不想交的部分
        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>

把以下图片的名字改为【guaguale.jpg】，保存在和程序同一个文件夹内。