CreateJs-EaselJs基础
生活随笔
收集整理的這篇文章主要介紹了
CreateJs-EaselJs基础
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
CreateJs內(nèi)包含四個部分：EaselJS、TweenJS 、SoundJS 、PrloadJS
對應(yīng)的JS文件可在github上搜索到
easeJs的API
參考的學(xué)習(xí)鏈接 createjs入門到精通，后面章節(jié)需要付費(fèi)，以下是其免費(fèi)章節(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)的左上角的圓點(diǎ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();上述代碼的運(yùn)行效果是小圓（circle2）在大圓（circle1）的上面
層級修改方式 // 修改元素的層級 stage.setChildIndex(circle1,1);// 兩元素位置互換，即互換其在中數(shù)組位置 stage.swapChildren(circle1,circle2);// 根據(jù)元素下標(biāo)互換兩個元素 stage.swapChildrenAt(0,1);// 獲取元素的下標(biāo)值，因?yàn)橐话悴蝗菀椎弥搒hape對象的下標(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);}// 運(yùn)行加載條函數(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>拖拽案例
<!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 rectLen = 100; // 方形長度init();function init(){stage = new createjs.Stage('canvas');createjs.Ticker.addEventListener("tick", handleTick);createjs.Ticker.setFPS(60);start();}function handleTick(e){stage.update();}function start(){var rect = new createjs.Shape();rect.graphics.beginFill('pink').drawRect(0, 0, rectLen, rectLen);rect.x = rect.y = 100;// 獲取當(dāng)前鼠標(biāo)位置rect.addEventListener('mousedown', function(e) {// 定義全局變量 e.stageX/Y 即為鼠標(biāo)當(dāng)前坐標(biāo)oldX = e.stageX;oldY = e.stageY;})rect.addEventListener('pressmove', function(e) {rect.x = rect.x - oldX + e.stageX;rect.y = rect.y - oldY + e.stageY;// 因pressmove是持續(xù)觸發(fā)的事件，避免oldX和e.stageX之間的差值劇增而重新賦值// 總之就是更新坐標(biāo)oldX = e.stageX;oldY = e.stageY;})stage.addChild(rect);}})</script> </head> <body><canvas id="canvas" width="800" height="800"></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è)置注冊點(diǎn)的偏移量，沒設(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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pairs 和 ipairs区别
- 下一篇： 提高抗打击能力_如何提高心理承受能力或者