一篇文章帶你快速入門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會適配屏幕尺寸，裏面的圖片也會等比例變大變小。