[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) ```