动画
最后更新于：2022-04-02 03:29:15
[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)
```
';