現在html5小游戲越來越火爆了，由於公司業務的需要，也開發過幾款微信小游戲，用canvas寫的沒有利用什么框架，發現性能一直不怎么好，所以樓主就只能硬着頭皮去學習比較火的Adobe公司出的CreateJS框架，找了很久資料比較少，基本沒什么
中文文檔，很多都是英文文檔（想想我這才過四級，只能借用有道，一點一點看，一點一點翻譯學習），今天我就寫個引子（也是在慢慢學習），寫的不好，大家就不要見笑。
EaselJS是CreateJS Suite中的一個js庫，它可以讓canvas的使用變得簡單，它提供了一個直接了當的創建html5 canvas中使用富媒體、富交互應用的解決方案。
(一)如何使用
先去下載EaselJS框架，然后創建一個舞台canvas元素的舞台stage對象stage=new createjs.Stage('demo')，增加顯示的子對象到舞台上英文就是DisplayObject對象stage.addChild()，然后
渲染render就用stage.update()就可以了。EaselJS 支持功能常用的createjs下相對應的對象:
1.使用圖像就用Bitmap位圖對象。
2.矢量圖形就使用Shape和Graphics對象。
3.動畫Animated 位圖bitmaps 使用 SpriteSheet 和 Sprite 對象。
4.使用文本實例就用Text。
5.包含說有DisplayObjects對象的容器就用Container。
6.控制HTML DOM 元素的使用DOMElement。
所有顯示對象可以添加到舞台stage作為child,或直接吸引到畫布canvas。
使用說明：
所有的在舞台上的顯示對象DisplayObject（除了DOMElement），當使用mouse或touch時可以綁定事件。EaselJS支持 hover、 press和 release events，同時很容易使用drag和drop拖拽的模型。
讓我們看看基本的例子吧：
你可以現在 illustrates里面先去實現模擬，然后去用EaselJS創建Stage和shape去實現效果。
//Create a stage by getting a reference to the canvas
//創建一個階段通過引用到畫布上
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
//創建形狀顯示對象
circle = new createjs.Shape();
circle.graphics.beginFill("red").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();
基本的監聽綁定事件，簡單交互
displayObject.addEventListener("click", handleClick);
function handleClick(event){
// Click happenened
}
displayObject.addEventListener("mousedown", handlePress);
function handlePress(event) {
// A mouse press happened.
// Listen for mouse move while the mouse is down:
event.addEventListener("mousemove", handleMove);
}
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
}
結合上面創建的cricle顯示對象即：
//監聽圓形顯示對象，增加事件 displayObject.addEventListener("click", handleClick);
circle.addEventListener("click", handleClick);
function handleClick(event){
// 點擊時發生
alert(11);
}
circle.addEventListener("mousedown", handlePress);
function handlePress(event) {
alert('鼠標按下了')
// 鼠標按下時發生
// 監聽當鼠標按下移動時發生的事件
event.addEventListener("mousemove", handleMove);
}
function handleMove(event) {
// Check out the DragAndDrop example in GitHub for more
console.log('鼠標移動了')
}
基本的動畫例子
//Update stage will render next frame
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
//Circle will move 10 units to the right.
//圓將向右邊以10為單位移動
circle.x += 10;
//Will cause the circle to wrap back
//移動的距離大於舞台的距離，將重新開始
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update();
}
最后，EaselJS 也還有其他的功能，也簡單的說一下吧：
1.canvas陰影和CompositeOperation等特性
2.Ticker, a global heartbeat that objects can subscribe to（有點不太懂）
3.濾鏡，就是像ps里面的一下濾鏡遮罩，顏色通道這些。
4.按鈕button的功能，可以很簡單的創建按鈕交互。
5.SpriteSheetUtils 和 SpriteSheetBuilder幫助我們構建和管理SpriteSheet 在運行的時候。
createJS的學習是系列教程，喜歡就請繼續關注下期……一起成長