[TOC] ### 動畫的基本步驟 1. **清空`canvas`**再繪制每一幀動畫之前，需要清空所有。清空所有最簡單的做法就是`clearRect()`方法。 2. **保存`canvas`狀態**如果在繪制的過程中會更改`canvas`的狀態(顏色、移動了坐標原點等),又在繪制每一幀時都是原始狀態的話，則最好保存下`canvas`的狀態 3. **繪制動畫圖形**這一步才是真正的繪制動畫幀 4. **恢復`canvas`狀態**如果你前面保存了`canvas`狀態，則應該在繪制完成一幀之后恢復`canvas`狀態。 ## 控制動畫 一般用到下面三個方法： 1. `setInterval()` 2. `setTimeout()` 3. `requestAnimationFrame()` 實例 ``` let ctx={}; let x=0; var init=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ ctx = canvas.getContext("2d"); } init() var draw=()=>{ if(x+10>100){ x=0 }else{ x+=10 } ctx.clearRect(0,0,500,500); //清空所有的內容 ctx.fillRect(x,0,100,100) requestAnimationFrame(draw) } requestAnimationFrame(draw) ```