前面曾经记录过Canvas的基础知识《让自己也能使用Canvas》，在实际使用中，用封装好的库效率会高点。
使用成熟的库还能对基础知识有更深入的理解，CreateJS是基于HTML5开发的一套模块化的库和工具，有4个模块，github地址在这里。
最近看到有个中文网，很多API都翻译了出来，不过就是翻译的比较生硬。
我参考了国外写的一本书《HTML5.Games.with.CreateJS》，再根据自己的一些理解整理了一下这个库的使用。
下面所有的demo代码都可以在这里查看到。
一、Stage
Stage（舞台）就是展现图形、执行动画的地方，必须先创建Stage，然后才能做后续操作。
有两种方式的初始化：
stage = new createjs.Stage(document.getElementById(‘canvas‘)); stage = new createjs.Stage(‘canvas‘);//直接使用canvas的ID
接下来就是添加图形等布置操作，等到你布置好舞台后，就需要调用“update”方法，展示新的舞台内容。
stage.update();
二、Ticker
Ticker类是一个定时器，主要就是定时刷新舞台，理想的帧速率是60FPS，在这个类中也可以手动的修改这个速度。
var stage;
function init() {
stage = new createjs.Stage(‘canvas‘);//直接使用canvas的ID
createjs.Ticker.addEventListener("tick", runGame);
createjs.Ticker.setFPS(60);
}
function runGame(e) {
stage.update();
}
如果想控制“runGame”中的刷新，可以设置暂停。
“setPaused”方法可以修改“e”中的“paused”属性。
createjs.Ticker.setPaused(true);
function runGame(e) {
if(!e.paused)
stage.update();
}
三、Graphics
1）初始化方式
接下来可以画一些图出来，Graphics类可以画矢量图（vector）或位图（bitmap）。
var g = new createjs.Graphics(); g.beginStroke(‘#000‘); g.beginFill(‘#FF6600‘); g.drawRect(0,0,100,100);
也可以链式的写法。
var g = new createjs.Graphics().beginStroke(‘#000‘).beginFill(‘#FF6600‘).drawRect(0,0,100,100);
Graphics类仅仅提供了画图，但并不会显示，如果要显示，就需要“Shape”类的帮忙。
2）简写
Graphics类中的画图方法还有简写：
四、Shape
1）制作图形
一旦你创建了一个Graphics类，你就需要Shape类，下面的代码接上面的“g”。
var square = new createjs.Shape(g); square.x = square.y = 100; stage.addChild(square);
除了正方形，还可以有三角形、圆、多边形等，详细的代码可以在这里看到。
2）简单的动画
使用动画就会引入TweenJS模块，将会用到上面画正方形的Graphics代码，多了下面两句代码。
//绕着图形中心滚动
square.regX = square.regY = 50;//设置图形的X和Y轴位移
createjs.Tween.get(square).to({
rotation: 360
}, 3000);
五、一个UI元素demo
接下来制作一个常见的加载条，当年上传、打开某个程序或做其它操作经常能看到，详细代码可以在这里查看到。
1）制作过程
先设置舞台，再创建创建加载条，最后用定时器累加加载条长度，其实也可以直接在Ticker事件中累加长度，只是速度会快一点。
function init() {
setupStage();//设置舞台
buildLoaderBar();//创建加载条
startLoad();//用定时器累加加载条长度
}
用链式写法来写更新长度的那段代码，“updateLoaderBar”是在“startLoad”函数中的。
function updateLoaderBar() {
loaderBar.graphics.beginFill(‘#00ff00‘).drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();
loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
}
先是画里面的蓝色，再画边框。
beginFill和endFill组合使用了一下，endFill是指重新开始画，使得后面的设置不会影响当前的。
如果我去掉endFill，将会直接显示完整的绿色，因为后面的“drawRect(0, 0, LOADER_WIDTH, 40)”，又设置了一遍宽度。
beginStroke和endStroke组合使用，目的和上面的差不多。
如果把“endStroke”去掉，就会发现多了根右边框，之所以会多是前面的“drawRect”影响了展示。
2）一点小改造
后面再观察一下发现，其实可以不用每次来画边框，边框可以在“buildLoaderBar”函数中定义。
function buildLoaderBar() {
loaderBar = new createjs.Shape();
loaderBar.x = loaderBar.y = 100;
loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
stage.addChild(loaderBar);
}
相应的“updateLoaderBar”函数也要做些修改，drawRect中的X、Y坐标要修改下，宽度也要改变下。
本来以为设置了边宽为2，那么也要偏移2，但其实不是，只需要偏移1就行了。
function updateLoaderBar() {
loaderBar.graphics.beginFill(‘#00ff00‘).drawRect(1, 1, LOADER_WIDTH * percentLoaded - 2, 38).endFill();
}
如果我把边框的宽度改成4，偏移和宽度又要重新计算了，怪不得写在里面，就方便多了。