基礎動畫

終於到了我們的重頭戲，前面講了這麼多天基本介紹，今天終於進入重點動畫的部分！鼓掌！！！

產生畫面

產生畫面需要以下幾個步驟：
【step 1】 清除畫布: 除了背景，其他畫布上的元素要先清理掉。
【step 2】 儲存畫布狀態:若要每一次繪畫時畫布都是起始狀態，就要儲存畫布狀態。
【step 3】 畫出畫面:畫出需要畫面。
【step 4】 復原畫布狀態:復原畫布狀態，讓下次能重新繪畫時可以是畫布起始狀態。

控制畫面動畫

我們透過程式控制canvas的方法繪畫出畫面，通常我們繪製的結果是在程式執行之後，所以無法靠執行for迴圈產生動畫，必須靠定時重繪。

一般用到以下四種方法：
1.setInterval(function, delay)：每隔delay秒，執行function，適合不要受使用者互動影響的動畫
2.setTimeout(function, delay)：過delay秒後，執行function
3.requestAnimationFrame(callback)：通知瀏覽器你希望執行動畫的時候,要求瀏覽器在重繪下一張畫面之前,呼叫callback函數來更新動畫
4.使用者操作控制動畫:設置EventListener捕捉使用者輸入並執行對應動畫，ex.使用keyboard 或是 mouse event來控制動畫。

小小範例

容我做得爛爛的ＱＱ，我還不會跑橢圓
codepen範例連結

ctx.clearRect(0,0,300,300) //清空畫布
ctx.drawImage(playground, 0, 0, 300, 300) //畫操場
ctx.save() //儲存畫布
ctx.translate(150, 150) //位移畫布原點
let time = new Date()
ctx.rotate(8 * Math.PI / 60 * time.getSeconds()+ 8 * Math.PI / 60000 * time.getMilliseconds())//旋轉畫布原點
ctx.translate(50, 0) //位移畫布
ctx.drawImage(girl, -12, -12) //畫女孩
ctx.restore() //還原畫布
requestAnimationFrame(this.draw)  //做動畫

成果：

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Basic_animations
[2]https://www.w3school.com.cn/tags/html_ref_canvas.asp
[3]https://www.runoob.com/w3cnote/html5-canvas-intro.html
[4]http://caibaojian.com/canvas-draw-circle-line.html