一篇文章帶你快速入門createjs

　　開始用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"></script>  //引入相關的js檔案
<canvas id="canvas"></canvas>

var canvas = document.querySelector('#canvas');
//建立舞臺
var stage = new createjs.Stage(canvas);
//建立一個Shape物件，此處也可以建立文字Text,建立圖片Bitmap
var rect = new createjs.Shape();
//用畫筆設定顏色，呼叫方法畫矩形，矩形引數：x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//新增到舞臺  
stage.addChild(rect);
//重新整理舞臺
stage.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);

　　6.3 使用Rectangle剪裁圖片

　　使用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模式的話，就會感覺到動畫如絲般的流暢。

createjs.Ticker.timingMode = createjs.Ticker.RAF;

　　9.適配

　　在移動端開發中，不得不面對一個多螢幕，多尺寸的問題，所以適配問題顯得特別重要。

　　先固定canvas的width為750，根據裝置的高寬比設定對應750寬的高，然後用css將canvas的縮放或拉伸整個螢幕，這種方法可以保證canvas內部的元素的邏輯尺寸大小不發生變化，也能達到適配

<canvas id="game" width="750" height="700"></canvas>

　　注意，以上程式碼的width，height不同於css中的width，height。

　　比如，你在canvas內部繪製圖片，用x，y軸進行定位，這裡的x，y是相對於canvas這個整體。

　　我們再把canvas當成一整張圖片使用css進行適配

canvas{
     width: 100%;
}

　　那麼，就會有以下的效果，canvas會適配螢幕尺寸，裡面的圖片也會等比例變大變小。