对于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>