createjs簡介
官網(wǎng)：http://www.createjs.cc/
createjs中包含以下四個部分：
EaselJS：用于 Sprites、動畫、向量和位圖的繪制，創(chuàng)建 HTML5 Canvas 上的交互體驗(yàn)（包含多點(diǎn)觸控）
TweenJS：用于做動畫效果
SoundJS：音頻播放引擎
PreloadJS：網(wǎng)站資源預(yù)加載

類似于SoundJS，PreloadJS，如果自己處理起來比較方便的話，也可以自己寫，總的來說，它們相當(dāng)于一個輔助作用，可選可不選。因此，本文章主要講解EaselJS的使用。

EaselJS的大致api
畫圖片用(Bitmap)
畫圖形，比如矩形，圓形等用(Shape) 【類似于改變坐標(biāo)x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】
畫文字，用(Text)
還有容器Container的概念，容器可以包含多個顯示對象

EaselJS繪圖的大致流程
大致流程：創(chuàng)建顯示對象→設(shè)置一些參數(shù)→調(diào)用方法繪制→添加到舞臺→update()，代碼如下：

<script src="easeljs-0.7.1.min.js"></script> //引入相關(guān)的js文件 <canvas id="canvas"></canvas>var canvas = document.querySelector('#canvas'); //創(chuàng)建舞臺 var stage = new createjs.Stage(canvas); //創(chuàng)建一個Shape對象，此處也可以創(chuàng)建文字Text,創(chuàng)建圖片Bitmap var rect = new createjs.Shape(); //用畫筆設(shè)置顏色，調(diào)用方法畫矩形，矩形參數(shù)：x,y,w,h rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100); //添加到舞臺 stage.addChild(rect); //刷新舞臺 stage.update();

graphics可以設(shè)置一些樣式，線條寬度，顏色等等，也可以調(diào)用一些方法繪制圖形，比如矩形drawRect，圓形drawCircle等等，具體可以自己查看api。

注意：記得一定要把shape對象加到舞臺上，否則屏幕上不會顯示。

Ticker定時器
寫createjs肯定會遇到的一個，就是ticker，主要就是定時刷新舞臺，理想的幀速率是60FPS

createjs.Ticker.setFPS(60);

控制多個顯示對象的層級關(guān)系
stage，contain對象有個children屬性代表子元素，是一個數(shù)組，里面的元素層級像下標(biāo)一樣從0開始，簡單來說就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。
我們也可以動態(tài)改變children的層疊效果。

stage.setChildIndex(red,1);

5.容器 container
它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一個Container中方便統(tǒng)一管理。
比如一個人物，他由手，腳，頭，身體組成，你可以將這幾個部分放在同一個container中，統(tǒng)一移動。使用方法也比較簡單：

var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain);

蹬蹬蹬～本篇文章的重點(diǎn)，繪制圖像并對圖像進(jìn)行處理

繪制圖片
var bg = new createjs.Bitmap(“./background.png”);
stage.addChild(bg);
stage.update();
按照上面的EaselJS的正常的繪制流程來說，上面這段代碼應(yīng)該可以正常顯示。但是，只是有些情況下可以正常顯示的，這個圖像資源需要確定加載成功后才可以new，否則不會有圖像在畫布上，如果有做資源預(yù)加載，可以直接使用上面的代碼，如果沒有，則需要在image加載完成onload之后才進(jìn)行繪制

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相交的區(qū)域

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();

常用應(yīng)用場景：用來剪裁圖片，比如顯示圓形的圖片等

6.2 給圖片增加濾鏡效果

var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur];

我們發(fā)現(xiàn)，圖片還是沒有變模糊，原因是圖片添加了filter后stage立即刷新，filter只能保持一幀的效果，第二幀filter則失效了。而使用圖片的cache()方法后，可以使得無論舞臺怎么刷新，都可以保持住Filter的效果，添加cache還有很多作用，可以提高FPS，緩存等

bg.cache(0,0,bg.image.width,bg.image.height);

6.3 使用Rectangle剪裁圖片
使用EaselJS內(nèi)置的Rectangle對象來創(chuàng)建一個選取框，顯示圖片的某各部分。

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();

適用場景：拼圖小游戲，剪裁圖片……

createjs事件
easeljs事件默認(rèn)是不支持touch設(shè)備的，需要以下代碼才支持：

createjs.Touch.enable(stage);
對于Bitmap，Shape等對象，都可以直接使用addEventListener進(jìn)行事件監(jiān)聽

bitmap = new createjs.Bitmap(''); bitmap.addEventListener（‘click’，handle）;

CreateJs的渲染模式
CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，默認(rèn)是setTimeout，默認(rèn)的幀數(shù)是20，一般的話還沒啥，但是如果動畫多的話，設(shè)置成requestAnimationFrame模式的話，就會感覺到動畫如絲般的流暢。
createjs.Ticker.timingMode = createjs.Ticker.RAF;

9.適配
在移動端開發(fā)中，不得不面對一個多屏幕，多尺寸的問題，所以適配問題顯得特別重要。
先固定canvas的width為750，根據(jù)設(shè)備的高寬比設(shè)置對應(yīng)750寬的高，然后用css將canvas的縮放或拉伸整個屏幕，這種方法可以保證canvas內(nèi)部的元素的邏輯尺寸大小不發(fā)生變化，也能達(dá)到適配

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

注意，以上代碼的width，height不同于css中的width，height。

比如，你在canvas內(nèi)部繪制圖片，用x，y軸進(jìn)行定位，這里的x，y是相對于canvas這個整體。

我們再把canvas當(dāng)成一整張圖片使用css進(jìn)行適配

canvas{width: 100%; }

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

總結(jié)

以上是生活随笔為你收集整理的CreateJS 入门小记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。