如果你是前端开发者，那么你一定会接触到动画和游戏制作。而使用 HTML5 实现动画和游戏制作已成为现在最流行的一种做法。对于一款基于 HTML5 的游戏，那么一个强大且易用的绘图库就是不可或缺的。easeljs 就是这样一款 HTML5 的绘图框架，而 easeljs-loader 就是一款方便 easeljs 加载图片的 npm 包。
安装
首先你需要安装 easeljs 和 easeljs-loader ，可以使用 npm 安装：
npm install createjs-easeljs easeljs-loader
使用
加载图片
easeljs-loader 提供了一个 load 方法，以便我们加载图片。这个方法接收两个参数：一个是图片地址（可以是单个字符串或者数组）；另一个是 options 对象，可选参数。这个方法会返回一个 Promise 已方便我们进行回调。
-- -------------------- ---- -------
------ ------------- ---- -----------------
----- ------ - -
-----------------------------------
-----------------------------------
----------------------------------
--
-------------------------- -
------------ -----------
----------------- -- -
-- ----
---------------- -- -
-- ----
---这里我们传递了一个图片数组，然后在 options 对象中指定了 crossOrigin 为 Anonymous，这是为了避免浏览器的跨域问题。最后，我们使用 Promise 的方式来获取加载结果。
加载位图
加载位图与加载图片差不多，只是我们需要将图片加载为位图（Bitmap），方便我们进行绘制。
-- -------------------- ---- -------
------ ------- ---- -------------------
------ ------------- ---- -----------------
----- ------ - -
----------------------------------
--
-------------------------- -
------------ -----------
----------------- -- -
----- ------ - --- ---------------------------
---------------- -- -
-- ----
---这里我们加载了一张 PNG 图片，并将其转化为位图。注意，我们这里使用了 createjs-easeljs 包来引入 easeljs 绘图框架。
加载 SpriteSheet
SpriteSheet 是指包含多张小图片（帧）的一张大图片。使用 SpriteSheet 可以让我们更方便地制作动画。easeljs 提供了 SpriteSheet 类进行处理。使用 easeljs-loader 加载 SpriteSheet 也很容易：
-- -------------------- ---- -------
------ ------- ---- -------------------
------ ------------- ---- -----------------
----- ------ - -
----------------------------------------
--
----- ---- - -
--------------- -- -- -- -- ------ --- ------- ----
--------------- -- --- -- -- ------ --- ------- ----
-- ---
--
-------------------------- -
------------ -----------
----------------- -- -
----- ----------- - --- ---------------------
------- --------
------- ----
---
---------------- -- -
-- ----
---这里我们加载了一张包含若干帧的 SpriteSheet 图片，并使用 frames 选项指定了每一帧（frame）的位置和大小等信息。最后，我们创建了一个独立的 SpriteSheet 对象。
结论
easeljs-loader 是一款非常方便的 npm 包，可以让我们更方便地加载图片，并转化为以 easeljs 绘图框架所需要的位图或 SpriteSheet 类。easeljs-loader 的灵活性也十分好，可以方便定制加载参数，进行高级的开发需求。因此，如果你需要在项目中使用 easeljs，那么 easeljs-loader 是一个非常推荐的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066dad7108f76aa73eca75