當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

CreateJs-EaselJs基础

發(fā)布時間：2023/12/14 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CreateJs-EaselJs基础小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

CreateJs內(nèi)包含四個部分：EaselJS、TweenJS 、SoundJS 、PrloadJS

對應(yīng)的JS文件可在github上搜索到

easeJs的API

參考的學(xué)習(xí)鏈接 createjs入門到精通，后面章節(jié)需要付費，以下是其免費章節(jié)部分內(nèi)容為參考編寫，案例在教程中都有，這里進(jìn)行了些注釋和改動。

EaselJs

使用前引入js

html的必備部分 <script src="lib/easeljs-NEXT.js"></script> // 或easeljs.js <canvas id="canvas"></canvas>

基本創(chuàng)建步驟

// 創(chuàng)建舞臺 let stage = new createjs.Stage('canvas'); //直接使用canvas的ID // 創(chuàng)建一個shape對象 let circle = new create.Shape(); // 用畫筆設(shè)置顏色，這里畫的是圓 circle.graphics.beginFill("#58bc58").drawCircle(0, 0, 100, 100); // 添加到舞臺 stage.addChild(rect); // 刷新舞臺 stage.update();

Shape對象層級關(guān)系

// canvas標(biāo)簽設(shè)置對應(yīng)的寬高才能顯示全，可在標(biāo)簽添加屬性，也可js添加屬性，如： let canvas = document.querySelector('#canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight;// 創(chuàng)建舞臺，這里是使用元素變量 let stage =new createjs.Stage(canvas); // 舞臺自動更新 createjs.Ticker.on('tick',stage);// 創(chuàng)建Shape對象 let circle1 = new createjs.Shape(); let circle2 = new createjs.Shape();// 一般做放大旋轉(zhuǎn)動畫都是先指定x,y位移量,不會使用默認(rèn)的左上角的圓點 circle1.x = circle1.y = 300; circle2.x = circle2.y = 200;// 用畫筆設(shè)置顏色，調(diào)用方法畫矩形，矩形參數(shù)：x,y,w,h circle1.graphics.beginFill("#58bc58").drawCircle(0,0,150,150); circle2.graphics.beginFill("pink").drawCircle(0,0,100,100);// 添加到舞臺存入數(shù)組 // 添加多個對象會有層級關(guān)系，越后面添加的越排前顯示 stage.addChild(circle1); stage.addChild(circle2);// 陰影效果，參數(shù)：顏色 x軸像素偏移量 y軸像素偏移量模糊值 circle2.shadow = new createjs.Shadow("#000",0,0,30);// scaleX,scaleY為shape對象的縮放值屬性，執(zhí)行函數(shù)達(dá)到縮放效果 function loop (){circle1.scaleX +=0.01;circle1.scaleY +=0.01;if(circle1.scaleX >=2){circle1.scaleX = 1;circle1.scaleY = 1;}requestAnimationFrame(loop); }loop();

上述代碼的運行效果是小圓（circle2）在大圓（circle1）的上面

層級修改方式 // 修改元素的層級 stage.setChildIndex(circle1,1);// 兩元素位置互換，即互換其在中數(shù)組位置 stage.swapChildren(circle1,circle2);// 根據(jù)元素下標(biāo)互換兩個元素 stage.swapChildrenAt(0,1);// 獲取元素的下標(biāo)值，因為一般不容易得知該shape對象的下標(biāo) console.log("circle2:"+stage.getChildIndex(circle2));

線

// 虛線，20是每個虛線的長，10是虛線的間隔，直線就是去掉setStrokeDash這個方法 let line = new createjs.Shape(); line.graphics.setStrokeDash([20,10],0).setStrokeStyle(2).beginStroke('pink').moveTo(0,0).lineTo(200,0); stage.addChild(line);// 遮罩效果 let rect = new createjs.Shape(); rect.graphics.rect(0,0,100,100).closePath(); let line = new createjs.Shape(); line.graphics.setStrokeDash([20,10],0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0); // 遮罩的rect作為line的mask屬性，不需要添加到stage line.mask = rect; stage.addChild(line);

createJs事件

具體的查找API

// 有些事件需要允許 stage.enableMouseOver(10);circle1.on('mouseover',()=>{console.log('666'); });

更新性能問題

// 舞臺自動更新，會不斷執(zhí)行，消耗性能 createjs.Ticker.on('tick',stage);// 只更新一次,需要再次更新時設(shè)置update為true var update = true; function tick(event) {if (update) {update = false; stage.update(event);} }

高亮效果

// 創(chuàng)建容器，set設(shè)置偏移量 let container = new createjs.Container().set({x:100,y:100 });// 循環(huán)生產(chǎn)正方形，存入容器 for(let i = 0; i<4; i++){let rect = new createjs.Shape().set({x:100* i,y:100* i});rect.fillCommand = rect.graphics.beginFill("green").command;rect.graphics.rect(0,0,100,100);container.addChild(rect); }// 容器存入舞臺 stage.addChild(container); // 允許執(zhí)行MouseOver事件 stage.enableMouseOver(10);// 事件綁定，可以on，也可以addEventListener container.on('mouseover',(e)=>{e.target.fillCommand.style = 'pink'; })container.on('mouseout',(e)=>{e.target.fillCommand.style = 'green'; })

進(jìn)度條案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="easeljs.js"></script><script>document.addEventListener('DOMContentLoaded',()=>{var stage; // 舞臺變量var loaderBar; // 加載條圖形var loadInterval; // 執(zhí)行間隔var LOADER_WIDTH = 400; // 進(jìn)度條寬度var percentLoaded = 0; //進(jìn)度百分比init();function init(){setupStage(); // 設(shè)置舞臺buildLoaderBar(); // 創(chuàng)建加載條startLoad(); // 開始加載條}// 設(shè)置舞臺函數(shù)function setupStage() {stage = new createjs.Stage('canvas');// 手動刷新舞臺createjs.Ticker.addEventListener('tick', runGame);createjs.Ticker.setFPS(60);}function runGame(e) {stage.update();}// 創(chuàng)建加載條函數(shù)function buildLoaderBar() {loaderBar = new createjs.Shape();loaderBar.x = loaderBar.y = 50;;// 設(shè)置筆畫的寬度/指定描邊顏色/畫圖loaderBar.graphics.setStrokeStyle(2).beginStroke().drawRect(0, 0, LOADER_WIDTH, 40);// 添加到舞臺stage.addChild(loaderBar);}// 運行加載條函數(shù)function startLoad() {loadInterval = setInterval(updateLoad, 50);}function updateLoad(){// 百分比數(shù)值疊加percentLoaded += .005;// 重新畫進(jìn)度條updateLoadBar();// 條滿時清楚定時器if (percentLoaded >= 1){clearInterval(loadInterval);stage.removeChild(loaderBar);}}function updateLoadBar() {// 進(jìn)度的矩形loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();// 描邊的矩形loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();}})</script> </head> <body><canvas id="canvas" width="600" height="400"></canvas> </body> </html>

拖拽案例

旋轉(zhuǎn)案例

旋轉(zhuǎn)用到tweenjs，需要引入

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="easeljs.js"></script><script src="tweenjs-NEXT.js"></script><script>document.addEventListener('DOMContentLoaded',()=>{var stage = new createjs.Stage('canvas');createjs.Ticker.on('tick',stage);// 畫圖方法Graphics，并不會顯示，如果要顯示，就需要Shapevar g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);var square = new createjs.Shape(g);// 設(shè)置shape對象相對stage的偏移量square.x = square.y = 100;stage.addChild(square);// 設(shè)置注冊點的偏移量，沒設(shè)置就按默認(rèn)的左上角(0,0)旋轉(zhuǎn)square.regX = square.regY = 50;createjs.Tween.get(square).to({rotation: 360}, 3000);})</script> </head> <body><canvas id="canvas" width="400" height="400"></canvas> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的CreateJs-EaselJs基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： pairs 和 ipairs区别
下一篇：提高抗打击能力_如何提高心理承受能力或者