在画布上做动画
方法有
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（），或者手动把参数改回来