開始用createjs這個框架的時候，發現網路上的相關教學還挺少的，所以寫一篇文章，方便日後查看。
createjs簡介
#官網：http://www.createjs.cc/
createjs中包含以下四個部分：
EaselJS：用於Sprites、動畫、向量和點陣圖的繪製，創建HTML5 Canvas 上的互動體驗（包含多點觸控）
TweenJS ：用於做動畫效果
SoundJS：音訊播放引擎
PreloadJS：網站資源預載
#類似SoundJS，PreloadJS，如果自己處理起來比較方便的話，也可以自己寫，總的來說，它們相當於一個輔助作用，可選可不選。因此，本文章主要說明EaselJS的使用。
1. EaselJS的大致上api
- ##畫圖片用(Bitmap)
- 畫圖形，例如矩形，圓形等用(Shape) 【類似於改變座標x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】
- 畫文字，用(Text)
- 還有容器Container的概念，容器可以包含多個顯示對象
2. EaselJS繪圖的大致流程
##大致流程：
建立顯示物件→設定一些參數→呼叫方法繪製→加入到舞台→update()
，程式碼如下：
<script src="easeljs-0.7.1.min.js?1.1.10"></script> //引入相关的js文件
<canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage = rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();登入後複製
graphics可以設定一些樣式，線條寬度，顏色等等，也可以呼叫一些方法繪製圖形，例如矩形drawRect，圓形drawCircle等等，具體可以自己查看api。
注意：記得一定要把shape物件加到舞台上，否則螢幕上不會顯示。
#3. Ticker計時器寫createjs肯定會遇到的一個，就是ticker，主要就是定時刷新舞台，理想的幀率是60FPS
createjs.Ticker.setFPS(60);
登入後複製
4 . 控制多個顯示物件的層級關係stage，contain物件有個children屬性代表子元素，是一個數組，裡面的元素層級像下標一樣從0開始，簡單來說就是後面的覆蓋前面的，addChild方法是加入顯示清單的最後。
我們也可以動態改變children的層疊效果。
stage.setChildIndex(red,1);
登入後複製
#5.容器container它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一個Container中方便統一管理。
例如一個人物，他由手，腳，頭，身體組成，你可以將這幾個部分放在同一個container中，統一移動。使用方法也比較簡單：
var contain = new createjs.Container();
contain.addChild(bgImg);
contain.addChild(bitmap);
stage.addChild(contain);
登入後複製
#6. 繪製圖片
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();登入後複製
按照上面的EaselJS的正常的繪製流程來說，上面這段代碼應該可以正常顯示。但是，只是有些情況下可以正常顯示的，這個圖像資源需要確定加載成功後才可以new，否則不會有圖像在畫布上，如果有做資源預加載，可以直接使用上面的程式碼，如果沒有，則需要在image載入完成onload之後才進行繪製
var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () { var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();
}登入後複製
僅僅繪製圖片是不夠的，createjs提供了幾種處理圖片的方法：
##
6.1 增加圖片遮罩層
使用mask屬性，可以只顯示圖片和shape相交的區域
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape; //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();登入後複製
常用應用程式場景：用來剪裁圖片，例如顯示圓形的圖片等
#
6.2 增加圖片濾鏡效果
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
登入後複製
我們發現，圖片還是沒有變模糊，原因是圖片添加了filter後stage立即刷新，filter只能保持一幀的效果，第二幀filter則失效了。而使用圖片的cache()方法後，可以使得無論舞台怎麼刷新，都可以保持住Filter的效果，添加cache還有很多作用，可以提高FPS，緩存等
bg.cache(0,0,bg.image.width,bg.image.height);
登入後複製
使用EaselJS內建的Rectangle物件來建立選取框，顯示圖片的某各部分。
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();登入後複製
7. createjs事件
easeljs事件默认是不支持touch设备的，需要以下代码才支持：
createjs.Touch.enable(stage);
登入後複製
对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听
bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;登入後複製
8. CreateJs的渲染模式
CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。
9.适配
在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。
<canvas id="game" width="1000" height="700"></canvas>
登入後複製
注意，以上代码的width，height不同于css中的width，height。
比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。
我们再把canvas当成一整张图片使用css进行适配
canvas{
width: 100%;
}登入後複製
那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。
以上是快速入門createjs實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
