canvas-basic-animation

        因为我们使用脚本来控制canvas元素，所以canvas元素非常容易做动画。不巧的是canvas元素不是按照使用flash的方式来设计的，所以有一定的局限性。

        最大的局限性很可能是一旦形状被画出，它就一直保持这样的状态。如果我们需要移动它，就不得不重新画，包括之前画的所有东西。重新画复杂的动画帧是非常耗时的，所以性能高度依赖运行它的电脑运行速度。

基本的动画步骤：

      画一个动画帧，我们需要做以下几步：

      1、清空canvas；
       除非你画的形状填充整个canvas（例如:背景图），否则你需要清空你之前所画的所有形状，最简单的清空所有的方式是使用clearRect方法。

      2、保存canvas的状态；
       如果你正在改变任何的影响canvas状态的设置（风格，变形等等），并且想确保原来的状态能够用到每次画的帧里，你就需要它。

      3、画动画形状；
        在这步里，渲染帧就是你要做的事情。

      4、恢复canvas状态；
       如果你曾经保存过状态，那么就应该在画一个新的帧之前恢复到原始的状态

控制动画：

       通过使用canvas提供的方法或者调用自定义的方法讲形状画在canvas上，在正常环境下，当脚本执行完，我们只能看到出现在canvas上的结果。比如我盟 不可能在一个“for”循环里做一个动画。

        我们需要一种没经过一段时间就会执行我们绘画的方法。有2种方法符合这种方式。首先setInterval 和setTimeout这两个方法可以每隔被设置的时间间隔就调用一次指定的方法（尽管在这种情况下requestAnimationFrame是被推荐使用的）

setInterval(animateShape, 500);

or

setTimeout(animateShape, 500);

        如果你没有任何的用户交互的画，你最好试用setInterval方法，它会重复的执行你提供的代码。在上面的例子中 animateShape方法每隔500毫秒执行一次。setTimeout方法仅仅是在设置的时间量之后执行一次。

        第二个方法我们能够用来控制用户的输入。如果我们想做个游戏，就可以试用键盘和鼠标的方法来控制动画。通过设定事件监听器就能捕获任何用户的交互并执行动画方法。
     以下是三个demo:

    

   演示地址

   

    演示地址

    

    演示地址

     

原文：https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Basic_animations?redirectlocale=en-US&redirectslug=Canvas_tutorial%2FBasic_animations