Canvas清除画布clearRect非常容易踩坑的点

对于cxt.clearRect()的基础理解是这样的：可以用来清除画布中的内容，那么只要cxt.clearRect(0，0，画布宽，画布高) 就可以清除整张画布。如果只理解到这里，那么clearRect就很容易踩到一个坑。我们来下例子，我做了一个自由画板，代码如下：<!DOCTYPE html><html lang="en"><head><meta cha

金色浪花

13637人浏览 · 2022-05-12 12:25:07

金色浪花 · 2022-05-12 12:25:07 发布

对于cxt.clearRect()的基础理解是这样的：可以用来清除画布中的内容，那么只要cxt.clearRect(0，0，画布宽，画布高) 就可以清除整张画布。

如果只理解到这里，那么clearRect就很容易踩到一个坑。我们来下例子，我做了一个自由画板，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自由涂鸦画板</title>
</head>
<style>
    body{text-align: center;padding-top: 20px;}
    canvas{box-shadow: 0 0 10px #333;margin: 0 auto;}
</style>
<body>
    <canvas id="canvas" width="800" height="600">
        您的浏览器不支持canvas
    </canvas>

    <button id="clearBtn">清除图形</button>
</body>
</html>

<script>
    var canvas = document.getElementById("canvas")
    var clearBtn = document.getElementById("clearBtn");

    if(canvas.getContext){
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 10;

        canvas.onmousedown = function(e){
           let dx = e.clientX - canvas.offsetLeft;
           let dy = e.clientY - canvas.offsetTop;
           ctx.moveTo(dx,dy)

           canvas.onmousemove = function (e1){
                let mx = e1.clientX - canvas.offsetLeft;
                let my = e1.clientY - canvas.offsetTop;
                ctx.lineTo(mx,my)
                ctx.stroke()
           }

           canvas.onmouseup = function(e3){
                canvas.onmousemove = null;
           }
        }

        clearBtn.onclick = function(e){
            ctx.clearRect(0,0,800,600);
            
        }

    }else{
        console.log('您的浏览器不支持canvas')
    }


    

</script>

来看下运行效果：

绘制没有任何问题，我们在来看下清除图形的功能

但，如果这时候，我们再画的时候就会发现，之前的图形又无缘无故的出现了

这是为什么呢？

其实clearRect实际上清除的只是fill跟stroke的内容，而不会清除path路径，上一次的path没有清除就stroke了，所以表现的就是上次绘制的图形也跟着出来了。

如何解决：

解决方法也很简单，只要我们在再beginPath一次，那么就能开启新的path，从而达到清除旧的path的效果

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自由涂鸦画板</title>
</head>
<style>
    body{text-align: center;padding-top: 20px;}
    canvas{box-shadow: 0 0 10px #333;margin: 0 auto;}
</style>
<body>
    <canvas id="canvas" width="800" height="600">
        您的浏览器不支持canvas
    </canvas>

    <button id="clearBtn">清除图形</button>
</body>
</html>

<script>
    var canvas = document.getElementById("canvas")
    var clearBtn = document.getElementById("clearBtn");

    if(canvas.getContext){
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 10;

        canvas.onmousedown = function(e){
           let dx = e.clientX - canvas.offsetLeft;
           let dy = e.clientY - canvas.offsetTop;
           ctx.moveTo(dx,dy)

           canvas.onmousemove = function (e1){
                let mx = e1.clientX - canvas.offsetLeft;
                let my = e1.clientY - canvas.offsetTop;
                ctx.lineTo(mx,my)
                ctx.stroke()
           }

           canvas.onmouseup = function(e3){
                canvas.onmousemove = null;
           }
        }

        clearBtn.onclick = function(e){
            ctx.clearRect(0,0,800,600);
            ctx.beginPath();
        }

    }else{
        console.log('您的浏览器不支持canvas')
    }


    

</script>