站長(zhǎng)資訊網(wǎng)-
畫(huà)圖片用(Bitmap)
-
畫(huà)圖形，比如矩形，圓形等用(Shape) 【類似于改變坐標(biāo)x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】
-
畫(huà)文字，用(Text)
-
還有容器Container的概念，容器可以包含多個(gè)顯示對(duì)象
<script src="easeljs-0.7.1.min.js?1.1.10"></script> //引入相關(guān)的js文件 <canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage = rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();
graphics可以設(shè)置一些樣式，線條寬度，顏色等等，也可以調(diào)用一些方法繪制圖形，比如矩形drawRect，圓形drawCircle等等，具體可以自己查看api。
createjs.Ticker.setFPS(60);
stage.setChildIndex(red,1);
var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain);
蹬蹬蹬～本篇文章的重點(diǎn)，繪制圖像并對(duì)圖像進(jìn)行處理
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提供了幾種處理圖片的方法：
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];
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();
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）;
<canvas id="game" width="1000" height="700"></canvas>
注意，以上代碼的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ì)等比例變大變小。
