Canvas 动画原理与 fabric 实现

Posted 2022-10-27 liangklfang

本章节内容主要关注如何在 Canvas 中绘制动画效果。在 html5 的 Canvas 中结合 JS 可以绘制雪碧图动画，动画在一些 H5 游戏中或者富交互的应用中被广泛使用。游戏的动画帧可以在一个单独的图片中保存，然后使用 HTML5 的 Canvas 结合 JS 在特定的时间点来绘制特定的内容。本章节将详解 HTML5 Canvas 的雪碧图动画原理，并在文章的末尾将雪碧图动画应用于简单的 HTML5 应用中。

1.绘制 Canvas 雪碧图动画

1.1 Canvas 雪碧图

二维的基于帧的动画可以在 HTML5 的 Canvas 中使用，其原理是在指定的时间间隔将一个单独的图片绘制在一个指定的区域。前面章节讲述过通过 drawImage 方法可将像素源锁定在某一张图片的特定位置，而这特定的位置就被叫做雪碧图区域(sprite sheet)。比如下面这种图的每一个数字区域就是一个独立的雪碧图区域。

通过该图即可绘制出雪碧图动画:

其实 HTML5 的 Canvas 动画雪碧图区域和 CSS 的雪碧图原理是一样的。雪碧图就是在一个图片中包含多个帧的数据。比如下面的雪碧图包含了 10 帧，图片的总宽度是 460px，因此，每一帧的宽度是 460/10，即 46px。