CreateJS 指南

https://zhuanlan.zhihu.com/p/40799542
简介

CreateJS是基于HTML5开发的一套模块化的库和工具，基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。

历史可以追溯到7年前 flash 使用慢慢变少那个时代，gskinner 开发它作为“下一代”的富交互的工具库，Adobbe、微软、火狐官方资助的一个项目，API 在很多地方和 Flash 是很像，同时可以通过Adobe Animate CC（替代 flash）直接导出Canvas在Web中使用。

在 18年 终于发布了 1.0 版本，同时官方正在开发 2.0 版本，相信不就会有一个更现代化的 Createjs 呈现给开发者。

模块组成

CreateJS 提供的 4 个模块可以帮助处理游戏开发中常见操作：
EaselJS：用于位图、图形、Sprites、文本的绘制，还包含 Ticker 定时器
TweenJS：用来创建补间动画效果
PreloadJS：游戏资源的预加载和管理，包括图片、音频、json等资源
SoundJS：播放和处理音频

更好使用

目前官方版本的 createjs 不支持通过 npm 方式的使用，导致在 ES6 开发中，需要在 html 中手动引入一个

createjs-npm 通过 imports-loader、exports-loader 对官方库加了一层胶水，让大家可以向使用 npm 包方式一样使用，具体为：

// 安装后和官方 createjs 1.0 使用一致
npm install createjs-npm -S

// 引入全部模块
import createjs from 'createjs-npm';

// 只引入单个模块（xx 可以是 easel、preload、tween、sound）
import createjs from 'createjs-npm/lib/xx';
EaselJS 的使用
EaselJS 在 Createjs 中承担 画 的能力，比如说你要画图片、画图形、画帧动画、画文字可以使用它的 API 实现。

步骤

比如说你需要在画一个红色的圆，必含步骤为创建舞台->创建对象->设置对象属性->添加对象到舞台->更新舞台呈现下一帧：

//创建一个舞台，得到一个参考的画布
  const stage = new createjs.Stage("myCanvas");
  //创建一个形状的显示对象
  const circle = new createjs.Shape();
  circle.graphics.beginFill("red").drawCircle(0, 0, 40);
  //形状实例的设置位置
  circle.x = circle.y = 50;
  //添加形状实例到舞台显示列表
  stage.addChild(circle);
  //更新舞台将呈现下一帧
  stage.update();