canvas animation

动画的基本步骤：

1. 清空canvas（clearRect方法）

2. 保存canvas状态

3. animated shapes（绘制动画图形）

4. 恢复canvas状态

Controlling an animation

Shapes are drawn to the canvas by using the canvas methods directly or calling custom function.In normal circumstances we only see these results appear on the canvas when the script finishes execution.For instance it isn't possible to do an animation form within a for loop.

We need a way to execute our drawing functions over a period of time.There are two ways to control an animation like this.First there's the setInterval and setTimeout function which can be used to call a specific function over a set period of time.

Scheduled updates

First there's the window.setInterval(),window.setTimeout() and windeo.requestAnimationFrame() function, which can  be used to call a specific function over a set period of time.

setInterval(function,delay)  周期性地调用一个函数(function)或执行一段代码

var intervalID = window.setInterval(func,delay[,param1,param2,...]);

var intervalID = window.setInterval(code,delay);

· intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()

· func 想要重复调用的函数

· code 是另一种语法的应用，是指想要重复执行的一段字符串构成的代码（使用该语法不推荐）

· delay 是每次延迟的毫秒数（一秒等于1000毫秒），函数每次调用会在改延迟之后

setTimeout(function,delay) 在指定的延迟时间后调用一个函数或执行一段代码片段

requestAnimationFrame(callback)

Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

If you don't want any user interaction you can use the setInterval() function which repeatedly executes the supplied code.If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout().By setting EventListeners,we catch any user interaction and execute our animation function.