EaselJS

EaselJS 简介

EaselJS 是 CreateJS 套件中的核心 2D 渲染库，用于在 HTML5 Canvas 上构建高性能的交互式图形内容。它提供了一套层级化的显示列表（Display List），让开发者可以像操作 DOM 树一样组织、变换和动画化图形对象。

核心特性

• 显示列表：所有可视元素继承自 DisplayObject，支持 x/y、旋转、缩放、斜切、透明度、阴影等通用属性。
• 交互模型：内置鼠标与触摸事件，可直接在显示对象上监听 click 等事件。
• 精灵动画：通过 SpriteSheet 与 Sprite 管理逐帧动画与序列播放。
• 矢量绘图：Graphics 提供链式绘图 API，配合 Shape 渲染矢量图形。
• 统一时钟：Ticker 提供可暂停的集中式帧循环管理。

快速上手

在 Canvas 上绘制一个红色方块：

var stage = new createjs.Stage('myCanvas');
var shape = new createjs.Shape();
shape.graphics.beginFill('red').drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();

精灵动画示例：

var ss = new createjs.SpriteSheet({
  frames: { width: 32, height: 64, numFrames: 19 },
  animations: { run: [0, 25], jump: [26, 63, 'run'] },
  images: ['./assets/runningGrant.png']
});

var sprite = new createjs.Sprite(ss, 'run');
stage.addChild(sprite);
sprite.on('click', function () { sprite.gotoAndPlay('jump'); });
createjs.Ticker.on('tick', stage);

主要类一览

适用与注意

EaselJS 的 API 受 Flash 显示列表启发，对 JS 与 AS3 开发者都较为友好。它无外部依赖，可与 SoundJS、PreloadJS、TweenJS 组合使用。需要注意的是，项目近年维护活跃度不高，WebGL 支持仍有限，文本渲染仅支持单行，在现代框架中集成时通常需要自行封装。