EaselJS:简化处理HTML5画布
TweenJS:用来帮助调整HTML5和Javascript属性
SoundJS:用来简化处理HTML5 audio
PreLoadJS:帮助管理和协调加载中的一些资源

<script src="js/easeljs-0.8.2.min.js"></script>

<canvas id="imageView" width="560" height="410">您的浏览器版本过低，请更换更高版本的浏览器</canvas>

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();

//Create a stage by getting a reference to the canvas
var stage = new createjs.Stage("circleView");
//Create a Shape DisplayObject.
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);
//Set position of Shape instance.
circle.x = circle.y = 50;
//Add Shape instance to stage display list.
stage.addChild(circle);
//Update stage will render next frame
stage.update();

stage.addEventListener("click",handleClick);
function handleClick() {// Click happened;console.log("The mouse is clicked.");
}
stage.addEventListener("mousedown",handlePress);
function handlePress() {// A mouse press happened.// Listen for mouse move while the mouse is down:console.log("The mouse is pressed.");stage.addEventListener("mousemove",handleMove);
}
function handleMove() {// Check out the DragAndDrop example in GitHub for moreconsole.log("The mouse is moved.");
}

The mouse is pressed.
The mouse is clicked.

// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {var maxX =  stage.canvas.width - 50;var maxY =  stage.canvas.height - 50;//Will cause the circle to wrap backif(circle.x < maxX && circle.y == 50){// Circle will move 10 units to the right.circle.x +=10;}else if(circle.x == maxX && circle.y <maxY){circle.y +=10;}else if(circle.x > 50 && circle.y == maxY){circle.x -=10;}else if(circle.x<= 50){circle.y -=10;}stage.update();
}

<canvas id="view" width="80" height="80"></canvas>

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {// 源图像的数组。图像可以是一个html image实例，或URI图片。前者是建议控制堆载预压images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],// 定义单个帧。有两个支持格式的帧数据：当所有的帧大小是一样的（在一个网格）， 使用对象的width, height, regX, regY 统计特性。// width & height 所需和指定的帧的尺寸// regX & regY 指示帧的注册点或“原点”// spacing 表示帧之间的间隔// margin 指定图像边缘的边缘// count 允许您指定在spritesheet帧的总数；如果省略，这将根据源图像的尺寸和结构计算。帧将被分配的指标，根据他们的位置在源图像（左至右，顶部至底部）。frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},// 一个定义序列的帧的对象，以发挥命名动画。每个属性对应一个同名动画。// 每个动画必须指定播放的帧，还可以包括相关的播放速度（如2 将播放速度的两倍，0.5半）和下一个动画序列的名称。
    animations:{run:[0,3]}
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run")container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5); //设置帧
createjs.Ticker.addEventListener("tick",stage);
stage.update();

<canvas id="view" width="80" height="80"></canvas>
<div class="buttons"><input id="goStraight" value="Go Straight" type="button" /><input id="goLeft" value="Go Left"  type="button"/><input id="goRight" value="Go Right"  type="button"/><input id="goBack" value="Go Back"  type="button"/>
</div>

var stage = new createjs.Stage("view");
container = new createjs.Container();
var data = {images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},animations:{stand:0,run1:[0,3],run2:[4,7],run3:[8,11],run4:[12,15]}
}
var spriteSheet = new createjs.SpriteSheet(data)
var instance = new createjs.Sprite(spriteSheet,"run1")container.addChild(instance);
stage.addChild(container);
createjs.Ticker.setFPS(5);
createjs.Ticker.addEventListener("tick",stage);
stage.update();document.getElementById('goStraight').onclick =  function goStraight() {instance.gotoAndPlay("run1");
}
document.getElementById('goLeft').onclick =  function goLeft() {instance.gotoAndPlay("run2");
}
document.getElementById('goRight').onclick =  function goRight() {instance.gotoAndPlay("run3");
}
document.getElementById('goBack').onclick =  function goBack() {instance.gotoAndPlay("run4");
}

<canvas id="View" width="300" height="80"></canvas>
<script>var stage = new createjs.Stage("View");var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");stage.addChild(theText);stage.update();
</script>

#View { background-color: #fddfdf;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用 Container 创建保存其他显示对象的容器</title><script src="js/base/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="view" width="300" height="300"></canvas>
<script>var stage = new createjs.Stage("view");container = new createjs.Container();//先来绘制个正方形var square = new createjs.Shape();square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);container.addChild(square);//先来绘制个正方形var square2 = new createjs.Shape();square2.graphics.beginFill("orange").drawRect(50,50,200,200);container.addChild(square2);//然后我们来绘制个圆形var circle = new createjs.Shape();circle.graphics.beginFill("blue").drawCircle(150,150,100);container.addChild(circle);//最后我们再绘制个圆形var circle2 = new createjs.Shape();circle2.graphics.beginFill("white").drawCircle(150,150,50);container.addChild(circle2);stage.addChild(container);stage.update();
</script>
</body>
</html>