EaselJS創建圖形

var stage = new createjs.Stage("demoCanvas");var circle = new createjs.Shape();circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,5);circle.x = 100;circle.y = 100;stage.addChild(circle);stage.update();

EaselJS創建文字

var stage = new createjs.Stage("demoCanvas");var txt = new createjs.Text("HELLO", "20px Times", "#000");txt.x = 100;txt.y = 100;txt.text = "hello,world!";stage.addChild(txt);stage.update();

容器

var button = new createjs.Container();var label = new createjs.Text("OK","20px Times","#000");label.textAlign = 'center';label.texBaseLine = 'middle';var shape = new createjs.Shape();shape.graphics.beginFill('#ff0000').drawCircle(0,0,50);button.addChild(shape,label);button.regX = shape.width/2;button.regY = shape.height/2;button.x = 100;button.y = 100;button.cursor = "pointer";label.x = button.regX;label.y = 50;stage.addChild(button);

添加事件監聽和Ticker

var stage; function init(){stage = new createjs.Stage('game');stage.enableMouseOver();createjs.Ticker.setFPS(60);createjs.Ticker.addEventListener('tick',update); }function update(event){stage.update(); }

使用EaselJS處理圖片

<script>var stage;function init(){stage = new createjs.Stage("game");var bg = new createjs.Bitmap("./background.png");//只選取圖片的一部分顯示在頁面var rect = new createjs.Rectangle(100,100,100,100);bg.sourceRect = rect;//遮罩Maskvar shape = new createjs.Shape();shape.graphics.beginFill("#000").drawCircle(0,0,100);shape.x = 200;shape.y = 100;bg.mask = shape;stage.addChild(shape);//圖片濾鏡var blur = new createjs.BlurFilter(5,5,1);bg.filters = [blur];//圖片cachebg.cache(0,0,bg.image.width,bg.image.height);stage.addChild(bg);createjs.Ticker.setFPS(60);createjs.Ticker.addEventListener('tick',update);}function update(event){shape.x +=5;if(shape.x > bg.getBounds().width){shape.x = 0;}stage.update();} </script>

使用Sprite制作動畫

var data = {"images":["./spritesheet_grant.png"],//圖片路徑"frames":{"height": 292, "width": 165, "count": 64,"regX": 82, "regY": 0},//每幀的尺寸，count是總幀數"animations":{"run": [0, 25, "run", 1.5],//[開始幀，結束幀，動畫完成后的動作，速度]"jump": [26, 63, "run"]} } var spriteSheet = new createjs.SpriteSheet(data);//方法一 sprite = new createjs.Sprite(spriteSheet); sprite.gotoAndPlay("run"); //方法二 sprite = new createjs.Sprite(spriteSheet，"run"); stage.addChild(sprite);//刪除動畫 sprite.addEventListener('animationend',function(event){stage.removeChild(event.target);});

TweenJS和Tick動畫

createjs.Tween.get(circle, { loop: true }).to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)).to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)).to({ alpha: 0, y: 225 }, 100).to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)).to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));createjs.Ticker.setFPS(60);createjs.Ticker.addEventListener("tick", stage);

PreloadJS和SoundJS

//聲音的使用 createjs.Sound.registerSound("assets/sound.mp3", "soundname"); createjs.Sound.play("soundname"); //PreloadJS var queue = new createjs.loadQueue(false); //本地開發使用false即可。 queue.installPlugin(createjs.Sound); //如果載入聲音，必須先注冊createjs.Sound queue.on("complete", handleComplete, this); //載入完成后調用 queue.loadFile({id:"sound", src:"sound.mp3"}); //載入單個文件 //載入一個文件列表 queue.loadManifest([{id: "myImage1", src:"Image1.jpg"}，{id: "myImage2", src:"Image2.jpg"}{id: "myImage3", src:"Image3.jpg"}{id: "myImage4", src:"Image4.jpg"}]); function handleComplete() {createjs.Sound.play("sound");var image = queue.getResult("myImage1");var bitmap = new createjs.Bitmap(image); }

createjs獲取dom

<div id="test" style="..."></div>var rect = new createjs.DOMElement("test");

hitTest碰撞檢測

//1.全局點坐標判斷，例如當前鼠標的位置坐標是否與stage中的一個圖形Shape發生碰撞 var stage, circle, loader;function init() {stage = new createjs.Stage(document.getElementById('game'));createjs.Ticker.addEvenetListener("tick", handleTick);createjs.Ticker.setFPS(60);circle = new createjs.Shape();circle.graphics.beginFill("red").dc(100,100,50);stage.addChild(circle);function handleTick(event){circle.alpha = 0.2;if (circle.hitTest(stage.mouseX, stage.mouseY)) {//直接使用circle的hitTest碰撞檢測方法circle.alpha = 1; }stage.update();}}//2.把全局坐標轉化為本地坐標 var stage, holder;function init() {stage = new createjs.Stage("game");holder = stage.addChild(new createjs.Container());holder.x = holder.y = 150;for (var i=0; i<25; i++) {var shape = new createjs.Shape();shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30);shape.x = Math.random()*300-150;shape.y = Math.random()*300-150;holder.addChild(shape);}createjs.Ticker.on("tick", tick);}function tick(event) {holder.rotation += 3;var l = holder.getNumChildren();for (var i=0; i<l; i++) {var child = holder.getChildAt(i);child.alpha = 0.1;var pt = child.globalToLocal(stage.mouseX, stage.mouseY);//先使用元素的globalToLocal做坐標的轉換console.log(pt.x, pt.y);if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { child.alpha = 1; }//碰撞判斷，使用轉換后的本地坐標}stage.update(event);} //3.LocalTOLocal,判斷頁面中的兩個元素是否碰撞 var stage, arm, target;function init() {stage = new createjs.Stage("game");//紅色目標target = stage.addChild(new createjs.Shape());target.graphics.beginFill("red").drawCircle(0,0,45).beginFill("white").drawCircle(0,0,30).beginFill("red").drawCircle(0,0,15);target.x = 100;target.y = 180;arm = stage.addChild(new createjs.Shape());arm.graphics.beginFill("black").drawRect(-2,-2,100,4)//黑色方形.beginFill("blue").drawCircle(100,0,8);//藍色球arm.x = 180;arm.y = 100;createjs.Ticker.on("tick", tick);}function tick(event) {arm.rotation += 5;target.alpha = 0.2;var pt = arm.localToLocal(100,0,target);//碰撞檢測前，先把arm圖形中的某點的坐標跟目標target做一個轉化，這里是（100，0），也就是藍球中心if (target.hitTest(pt.x, pt.y)) { target.alpha = 1; }//使用轉化后的坐標進行檢測即可判斷兩個物體是否相交。stage.update(event);}

總結

以上是生活随笔為你收集整理的createjs基础入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。