要在HTML5 canvas中绘制图像动画效果，你需要绘制出每一帧的图像，然后在一个极短的时间内从一帧过渡到下一帧，形成动画效果。这其实是一种视觉欺骗，原理就像播放电影一样，胶片上每一格是一帧图片，然后快速的播放它们，在人的眼睛看来就是一个完整的动画效果。
制作canvas动画的基本步骤
下面是你在canvas上绘制一个动画帧的基本步骤：1、清空canvas：除了背景图像之外，你需要清空之前绘制的所有图形。
2、保存canvas的状态：如果在这一步中你使用了不同的绘图状态(例如描边大小和填充色等)，并且你想在绘制每一帧时使用相同的原始状态，你需要保存这些原始状态。
3、绘制动画图形：这一步中你需要绘制那些动画的图形元素。
4、恢复canvas状态：如果你之前保存过canvas的状态，在这一步中将它们恢复。
控制canvas动画
我们需要一种方法来在指定时间内执行我们的绘制图形函数。有两种方式可以控制动画的执行。
第一种是使用下面的三个window对象上的方法：window.setInterval()，window.setTimeout()和window.requestAnimationFrame()。它们都能在指定时间内调用指定的函数。setInterval(function, delay)：在每delay毫秒时间内反复执行function指定的函数。
setTimeout(function, delay)：在delay毫秒内执行function指定的函数。
requestAnimationFrame(callback)：通知浏览器你需要执行一个动画，并请求浏览器调用指定的函数来在下一次重绘前更新动画。
第二种方法是使用事件监听。例如你需要做一个小游戏，你可以监听键盘和鼠标的事件，然后在捕获相应的事件时使用setTimeout()方法来制作动画效果。
为了获得更好的动画性能，我们通常使用requestAnimationFrame()方法。当浏览器装备好绘制下一帧动画时，我们可以将绘制函数作为参数传入这个方法中。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery