在画布上做动画

方法有

setIntervel(function(){},time);

setTimeout(function(){},time);

新方法

window.requestAnimationFrame(function(){});

 

动画一般是执行同一个绘画函数多遍（其中每一遍执行会有一些参数不同 代表透明度的，位置的，大小的等等的参数）

这意味着要实现函数的重复执行

setInterval本身就是每隔time执行一次function，可以直接用了

而setTimeout是过了time后执行一次function，也就是只执行一次

而window.requestAnimation是现在的新方法，我目前不是很了解它的意思，但是同样只执行一次

之前对于如何实现重复绘画，我百思不得其解，

现在想来真是太傻了...

 

setTimeout 和 window.requestAnimation是一样的，

直接调用函数，然后在函数末尾调用setTimeout 或window.requestAnimation  

 

那么问题又来了，重复动画如何取消呢？

使用方法前先取个名字

var ID = setInterval();

要结束就用下面这个

clearInerval(ID);

setTimeout 和 window.requestAnimation 也同理，它们的取消方法如下：

clearTimeout(ID);

cancelAnimationFrame(ID);

 

reverse()和save（）很重要

使用方法就是所有绘画开始之前先save（）

每绘画完一帧就执行一次

ctx.reverse();save（）

如果改变了画布参数，画下一个图形时就要进行一次ctx.reverse();save（），或者手动把参数改回来