createjs基础入门

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基础入门相关推荐

用python循环语句求素数_Python基础入门_3条件语句和迭代循环
Python 基础入门前两篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类型这是第三篇内容,主要简单介绍条件语句和迭代循环语句,内容也比较简单,目录如下: 条 ...
MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
SketchUp Pro 2021基础入门学习视频教程
SketchUp Pro 2021基础入门学习视频教程 1280X720 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 流派:电子学习|语言:英语+中文字幕( ...
Maya基础入门学习教程
Maya基础入门学习教程视频:.MKV, 1280x720, 共57节课时长 4小时25分钟,3GB 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕指导老师:Shane Whitt ...
Maya2022基础入门学习教程
Maya2022基础入门学习教程 Maya 2022 Essential Training Maya2022基础入门学习教程 Maya 2022 Essential Training MP4 |视频: ...
Blender基础入门学习教程 Learning Blender from Scratch
Blender基础入门学习教程 Learning Blender from Scratch 流派:电子学习| MP4 |视频:h264,1280×720 |音频:aac,48000 Hz 语言:英语+ ...
json vue 对象转数组_vue 基础入门（一）修改
vue基础入门(一) 1. 什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标 ...

createjs基础入门

EaselJS创建图形

EaselJS创建文字

容器

添加事件监听和Ticker

使用EaselJS处理图片

使用Sprite制作动画

TweenJS和Tick动画

PreloadJS和SoundJS

createjs获取dom

hitTest碰撞检测

createjs基础入门相关推荐

最新文章

热门文章