《HTML5 canvas开发详解（第2版）》——2.11 清除画布的方法

本节书摘来自异步社区《html5 canvas开发详解（第2版）》一书中的第2章，第2.11节,作者： 【美】steve fulton , jeff fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

读者已经在第1章中探索了如何刷新画布，第4章还会更深入地探讨。在本章结束之前，还要介绍一个可用于完全清除画布和刷新内容的例子。

2.11.1　简单填充

使用一个新的背景色简单地填充整个画布，这样就可以清除当前内容，代码如下：

2.11.2　重置画布的宽和高

当画布的宽或高被重置时，当前画布内容就会被移除，代码如下：

2.11.3　重新设置画布的clearrect 函数

clearrect() 函数可以指定起始点的x、y位置以及宽度和高度来清除画布，代码如下：

尝试使用clearrect() 函数来绘制一个路径横跨画布的动画（见例 2-28）。通过使用第1章介绍的 settimeout()函数来完成动画。这个函数将重复地调用drawscreen()函数并更新路径的位置。由于这个操作相比在画布上一次绘制一个路径或图形要复杂得多，因此这里给出例子的完整代码，如下：

在例2-28中，首先创建一个命名为yoffset的变量，并赋值为0。下一步，在draw screen()函数中添加一个画布清除函数。然后绘制路径，并在y轴坐标值yoffset上累加。

如第1章所示，创建一个gameloop()函数并调用一次，在该函数中使用settimeout()函数每20ms递归调用自身，这将导致drawscreen()函数反复被调用。在draw screen()函数的底部，只需每次将yoffset加1，就可以创建路径向下移动的动画效果。