這篇文章主要介紹了javascript中createjs怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)靖安免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

createjs簡(jiǎn)介

官網(wǎng)：http://www.createjs.cc/

createjs中包含以下四個(gè)部分：

EaselJS：用于 Sprites、動(dòng)畫(huà)、向量和位圖的繪制，創(chuàng)建 HTML5 Canvas 上的交互體驗(yàn)（包含多點(diǎn)觸控）

TweenJS：用于做動(dòng)畫(huà)效果

SoundJS：音頻播放引擎

PreloadJS：網(wǎng)站資源預(yù)加載

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

1. EaselJS的大致api

• 畫(huà)圖片用(Bitmap)

• 畫(huà)圖形，比如矩形，圓形等用(Shape) 【類似于改變坐標(biāo)x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】

• 畫(huà)文字，用(Text)

• 還有容器Container的概念，容器可以包含多個(gè)顯示對(duì)象

2. EaselJS繪圖的大致流程

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

  //引入相關(guān)的js文件
 canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

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

注意：記得一定要把shape對(duì)象加到舞臺(tái)上，否則屏幕上不會(huì)顯示。

3. Ticker定時(shí)器

寫(xiě)createjs肯定會(huì)遇到的一個(gè)，就是ticker，主要就是定時(shí)刷新舞臺(tái)，理想的幀速率是60FPS

createjs.Ticker.setFPS(60);

4. 控制多個(gè)顯示對(duì)象的層級(jí)關(guān)系

stage，contain對(duì)象有個(gè)children屬性代表子元素，是一個(gè)數(shù)組，里面的元素層級(jí)像下標(biāo)一樣從0開(kāi)始，簡(jiǎn)單來(lái)說(shuō)就是后面的覆蓋前面的，addChild方法是添加到顯示列表的最后。

我們也可以動(dòng)態(tài)改變children的層疊效果。

stage.setChildIndex(red,1);

5.容器 container

它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一個(gè)Container中方便統(tǒng)一管理。

比如一個(gè)人物，他由手，腳，頭，身體組成，你可以將這幾個(gè)部分放在同一個(gè)container中，統(tǒng)一移動(dòng)。使用方法也比較簡(jiǎn)單：

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

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

6. 繪制圖片

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

按照上面的EaselJS的正常的繪制流程來(lái)說(shuō)，上面這段代碼應(yīng)該可以正常顯示。但是，只是有些情況下可以正常顯示的，這個(gè)圖像資源需要確定加載成功后才可以new，否則不會(huì)有圖像在畫(huà)布上，如果有做資源預(yù)加載，可以直接使用上面的代碼，如果沒(méi)有，則需要在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)用場(chǎng)景：用來(lái)剪裁圖片，比如顯示圓形的圖片等

6.2 給圖片增加濾鏡效果

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

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

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

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

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

適用場(chǎng)景：拼圖小游戲，剪裁圖片……

7. createjs事件

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

createjs.Touch.enable(stage);

對(duì)于Bitmap，Shape等對(duì)象，都可以直接使用addEventListener進(jìn)行事件監(jiān)聽(tīng)

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

8. CreateJs的渲染模式

CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，默認(rèn)是setTimeout，默認(rèn)的幀數(shù)是20，一般的話還沒(méi)啥，但是如果動(dòng)畫(huà)多的話，設(shè)置成requestAnimationFrame模式的話，就會(huì)感覺(jué)到動(dòng)畫(huà)如絲般的流暢。

9.適配

在移動(dòng)端開(kāi)發(fā)中，不得不面對(duì)一個(gè)多屏幕，多尺寸的問(wèn)題，所以適配問(wèn)題顯得特別重要。

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

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

我們?cè)侔裞anvas當(dāng)成一整張圖片使用css進(jìn)行適配

canvas{
     width: 100%;
}

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

   

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript中createjs怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

標(biāo)題名稱：javascript中createjs怎么用-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://weahome.cn/article/shogj.html