Canvas 本身并没有提供类似关键帧实现方法的动画，想要实现动画需要我们用定时器（setTimeout）和 Canvas 的橡皮擦（clearRect）来实现动画效果。

我们的本文的实例是简单的做一个小球反复运动，非常简单。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 height coordinate exp setIntervalanimationmyCanvas.width, height); myCanvas.myCanvas.myCanvas..myCanvas.myCanvas.coordinate coordinate coordinate exp

我们看看上边的代码，一开始定义三个变量，长（width）和宽（height）分别等于画布的长和宽，圆心的 X 坐标（coordinate）被定义到 20，因为圆设置的半径就是 20，如果为 0 的话圆的一半就会显示不全，不明白可以看看下边的图片。

速度（exp）为每次执行运动的像素数。

然后是一个定时器（setInterval），第一个参数是一个函数（animation），第二个参数是每多少毫米执行一次第一个参数所指定的函数。

最后看最关键的 animation() 函数，首先函数的第一句是一个新方法（clearRect()），用于删除画布的指定地方的内容，四个参数：X 坐标，Y 坐标，长度，宽度。这里我们删除了整块画布。

然后 fillStyle 定义圆的颜色，下一句开始绘制（beginPath()）。

arc() 这里的 X 坐标用之前定义的 coordinate 变量，方便进行变化。

之后结束绘制，渲染。

coordinate 加上速度（exp），下次绘制的时候就能有位置上的变化了。

如果现在就运行，不执行下边的代码就会造成小球一直运动，直达超出画布也不会掉头，这显然不是我们需要的。

所以这里做一个判断，如果圆心的 X 坐标等于 20（开始）或者宽度减 21（20px 加上 1px）就将速度乘上 –1 即可改变速度，如果速度是负数就会掉头走了。