《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，就可以建立路徑向下移動的動畫效果。