在我们继续这个话题之前，我们需要了解如何使用<canvas>创建一个动画。这是一个有点更难做的事情。首先,请理解,以阻碍web浏览器性能的方式使用canvas API是很容易的。在canvas上绘画是需要处理器密集型的工作,特别是如果你不断更新动画之类的图纸。缓解任何性能问题,我将使用一个新功能叫做requestAnimationFrame,允许我们的web浏览器来决定更新canvas的频率, 同时在我们的web文档保持最佳性能。这不是在所有浏览器都可用的, 但幸运的是保罗爱尔兰曾写过一个出色的poly-fill将此功能添加到旧版本的web浏览器。他在他的博客写下了这个脚本和web浏览器这个的特性。