HTML5画布：擦除已绘制的图形
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画布唯一的橡皮擦（但擦除方法不一定仅仅依靠橡皮擦，以后会介绍）。
画布有擦除功能，这个不难理解。最后那个例子很神奇，竟然一边画一边擦，并移动位置，就造成了“移动”的效果。其实没移动，只是因为在新的地方又画出的连续出现造成的错觉。
<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>
上面最后的这段命令，也就是“移动”效果。
有个问题：<canvas id="canv" style="border:1px solid;"></canvas>并没规定画布尺寸，上图里的边框尺寸怎么来的？ 这个擦除还带时间参数的，有意思。 赶紧又去看了看JS的定时器的那个帖子{:4_173:} 红影 发表于 2022-3-8 14:15
赶紧又去看了看JS的定时器的那个帖子
必须的吧，这个要掌握 红影 发表于 2022-3-8 14:05
画布有擦除功能，这个不难理解。最后那个例子很神奇，竟然一边画一边擦，并移动位置，就造成了“移动”的效 ...
理解正确 红影 发表于 2022-3-8 14:08
上面最后的这段命令，也就是“移动”效果。
有个问题：并没规定画布尺寸，上图里的边框尺寸怎么来的？
有默认值，但具体我也不知道是多少，我好想见过介绍的可是忘记了。另外，好像不同内核的浏览器默认的尺寸也不太一样，反正画布是有一定的可以作画的尺寸的。 哈哈哈，我是看天书，学不会哒 上海朝阳 发表于 2022-3-8 19:24
哈哈哈，我是看天书，学不会哒
嗯，没关系，不一定得人人去学这个 马黑黑 发表于 2022-3-8 17:54
必须的吧，这个要掌握
嗯嗯，基础的还是要知道的。 马黑黑 发表于 2022-3-8 17:58
有默认值，但具体我也不知道是多少，我好想见过介绍的可是忘记了。另外，好像不同内核的浏览器默认的尺寸 ...
我记得之前你在画布里设定长宽，我也不太理解。现在不设置了，也不理解{:4_173:} 红影 发表于 2022-3-8 21:10
我记得之前你在画布里设定长宽，我也不太理解。现在不设置了，也不理解
设定和不设定，根据场景需要来 红影 发表于 2022-3-8 21:09
嗯嗯，基础的还是要知道的。
是的 马黑黑 发表于 2022-3-8 17:54
理解正确
<canvas id="cvtxt" width="220" height="60" style="border:1px solid;"></canvas>
<script>
var txt = document.getElementById('cvtxt');
var txtc = txt.getContext('2d');
var xx = 10; //定义起始位置
txtc.font = "50px 黑体";
txtc.fillStyle = "red"; // 填充色
txtc.fillText("花潮论坛",10,50); // 实心字
var drop = setInterval(function(){
txtc.clearRect(xx,10,10,50);
xx += 1; //变换垂直位置：以1px步进
if(xx>220) clearInterval(drop); //
},10);
</script> 试验一下你上次教的文本用这个擦掉，挺好玩{:4_173:} 奇怪，我明明设定了一直擦到宽度，怎只擦了一半。本地测试可以的呀。 马黑黑 发表于 2022-3-8 21:11
设定和不设定，根据场景需要来
没想到不设定也自动存在的。 红影 发表于 2022-3-8 22:09
没想到不设定也自动存在的。
所谓画布，必须要默认尺寸，这是基本要求吧