- 畫圖片用(Bitmap)
- 畫圖形，比如矩形，圓形等用(Shape) 【類似於改變座標x，y，增加陰影shadow，透明度alpha，縮小放大scaleX/scaleY都可以做到】
- 畫文字，用(Text)
- 還有容器Container的概念，容器可以包含多個顯示物件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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。
|
1 |
createjs.Ticker.setFPS(60); |
|
1 |
stage.setChildIndex(red,1); |
|
1 2 3 4 |
var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain); |
蹬蹬蹬～本篇文章的重點，繪製影象並對影象進行處理
|
1 2 3 |
var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); |
按照上面的EaselJS的正常的繪製流程來說，上面這段程式碼應該可以正常顯示。但是，只是有些情況下可以正常顯示的，這個影象資源需要確定載入成功後才可以new，否則不會有影象在畫布上，如果有做資源預載入，可以直接使用上面的程式碼，如果沒有，則需要在image載入完成onload之後才進行繪製
|
1 2 3 4 5 6 7 |
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提供了幾種處理圖片的方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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 給圖片增加濾鏡效果
|
1 2 |
var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur]; |
|
1 |
bg.cache(0,0,bg.image.width,bg.image.height); |
6.3 使用Rectangle剪裁圖片
使用EaselJS內建的Rectangle物件來建立一個選取框，顯示圖片的某各部分。
|
1 2 3 4 5 6 7 8 |
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事件預設是不支援touch裝置的，需要以下程式碼才支援：
|
1 |
createjs.Touch.enable(stage); |
對於Bitmap，Shape等物件，都可以直接使用addEventListener進行事件監聽
|
1 2 |
bitmap = new createjs.Bitmap(''); bitmap.addEventListener（‘click’，handle）; |
CreateJs提供了兩種渲染模式，一種是用setTimeout，一種是用requestAnimationFrame，預設是setTimeout，預設的幀數是20，一般的話還沒啥，但是如果動畫多的話，設定成requestAnimationFrame模式的話，就會感覺到動畫如絲般的流暢。
|
1 |
createjs.Ticker.timingMode = createjs.Ticker.RAF; |
|
1 |
<canvas id="game" width="1000" height="700"></canvas> |
注意，以上程式碼的width，height不同於css中的width，height。
比如，你在canvas內部繪製圖片，用x，y軸進行定位，這裡的x，y是相對於canvas這個整體。
我們再把canvas當成一整張圖片使用css進行適配
|
1 2 3 |
canvas{ width: 100%; } |
那麼，就會有以下的效果，canvas會適配螢幕尺寸，裡面的圖片也會等比例變大變小。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
