HTML5画布：擦除已绘制的图形

马黑黑 · 发表于 2022-3-8 11:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

H5的canvas画布提供一个擦除方法，clearRect()，语法如下：

context.clearRect(x,y,w,h);

clearRect参数中：

x : 起始擦除x坐标；
y : 起始擦除y坐标；
w : 擦除宽度；
h : 擦除高度。

可以看出来，这是一个矩形橡皮擦。其中的xy指向矩形的左上角。下面举个实例，我们先绘制一个矩形，隔5秒钟后将其擦除：

<canvas id="canv"></canvas>

<script>

var cc = document.getElementById('canv');
var ct = cc.getContext('2d');
ct.fillRect(20,20,60,30); //在{20,20}处绘制一个60*30的矩形
//通过setTimeout定时器设定5秒后擦除前面绘制的矩形
var clrRt = setTimeout(function(){
ct.clearRect(20,20,60,30);
},5000);

</script>

注意观察上述代码中标红的那两句，一句是绘制矩形，一句是擦除矩形，它们所使用的参数完全一样。这是精准擦除，这种擦除方式在使用canvas画布做开发时会经常用到，它可以保证所擦除的对象是预设中的，而非画布上的其它对象。不过值得注意的是，画布上会有对象重叠的现象，而 clearRect() 方法针对的是指定区域内的所有像素的内容都会被擦除。试看下面的例子，它在上一个例子的基础上加了另外一个比较大的矩形，两个矩形有重合部分：

<canvas id="canv"></canvas>

<script>

var cc = document.getElementById('canv');
var ct = cc.getContext('2d');
ct.fillRect(20,20,60,30); //在{20,20}处绘制一个60*30的矩形
ct.fillStyle = "red"; //定义填充颜色
ct.fillRect(20,40,100,40); //在{20,40}处绘制一个100*400的矩形
//通过setTimeout定时器设定5秒后擦除前面绘制的第一个矩形
var clrRt = setTimeout(function(){
ct.clearRect(20,20,60,30);
},5000);

</script>

运行上述代码后将会发现，后面绘制的红色矩形与黑色矩形重合的部分也被清除掉了。这种情形与我们日常使用的绘图软件是一样的。

擦除是canvas画布制作动画必不可少的功夫，下面仍以矩形为例，我们将让矩形自上而下运动，看看如何实现：

<canvas id="canv" style="border:1px solid;"></canvas>

<script>

var cc = document.getElementById('canv');
var ct = cc.getContext('2d');
var yy = 20; //定义垂直起始位置
ct.fillStyle = "red"; //定义填充颜色
ct.fillRect(20,yy,10,10); //在{20,yy}处画一个10*10的矩形
//通过setInterval定时器令矩形向下运动
var drop = setInterval(function(){
ct.clearRect(20,yy,10,10); //擦除上一个矩形
yy += 1; //变换垂直位置：以1px步进
ct.fillRect(20,yy,10,10); //在新位置画一个10*10的矩形
if(yy>120) clearInterval(drop); //移动到120像素高度时关闭定时器
},10);

</script>

本例中，实现矩形“落下”的目的，是通过每隔10毫秒改变位置绘图并擦除上一个矩形而达成。如果注释掉擦除的语句，我们将得到一个竖立的长方形。同时提示一下，上例之所以不用setTimeout定时器，原因之前已经介绍过，setTimeout定时器不能重复工作，如果用它来替代setInterval定时器，则矩形只能落到1px处。

小结：本教程介绍canvas画布中的橡皮擦 clearRect()，它有四个参数，与 fillRect() 和 strokeRect() 一样，分别是x、y坐标值，宽度、高度值。这是擦除指定矩形区域的所有绘制对象，也是canvas画布唯一的橡皮擦（但擦除方法不一定仅仅依靠橡皮擦，以后会介绍）。