EaselJS：HTML5的交互式2D图形引擎

EaselJS是CreateJS套件中的一部分，它是一个用于HTML5 canvas元素的2D绘图引擎，可以用于创建和管理动画、用户交互和数据可视化。

以下是一个简单的EaselJS示例，它创建了一个简单的动画，通过点击来移动一个形状：

// 引入EaselJS库
import { Shape, Stage, Container } from "@createjs/easeljs";
 
// 获取canvas元素
const canvas = document.getElementById("myCanvas");
 
// 初始化舞台
const stage = new Stage(canvas);
 
// 创建一个容器
const container = new Container();
stage.addChild(container);
 
// 创建一个形状
const rect = new Shape();
rect.graphics.beginFill("Red").drawRect(0, 0, 100, 100);
 
// 设置形状的初始位置
rect.x = 50;
rect.y = 50;
 
// 将形状添加到容器
container.addChild(rect);
 
// 更新舞台
function tick(event) {
    stage.update(event);
}
 
// 监听点击事件来移动形状
function moveShape(event) {
    rect.x = event.stageX;
    rect.y = event.stageY;
}
 
// 注册事件监听
stage.addEventListener("stagemousedown", moveShape);
createjs.Ticker.on("tick", tick);

在这个例子中，我们首先引入了EaselJS的Shape、Stage和Container类。然后，我们获取了页面上的canvas元素，并初始化了一个舞台(stage)。接着，我们创建了一个容器(container)并将其添加到舞台上。我们创建了一个红色的矩形形状，并设置了其初始位置。

我们为容器注册了一个点击事件处理函数，当用户点击时，我们更新形状的位置。最后，我们设置了一个tick函数来更新舞台，并注册了createjs.Ticker的"tick"事件来周期性地调用tick函数。

这个简单的例子展示了如何使用EaselJS创建一个基本的交互式2D图形应用。