EaselJs

使用前引入js

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

基本创建步骤

// 创建舞台
let stage = new createjs.Stage('canvas'); //直接使用canvas的ID
// 创建一个shape对象
let circle = new create.Shape();
// 用画笔设置颜色，这里画的是圆
circle.graphics.beginFill("#58bc58").drawCircle(0, 0, 100, 100);
// 添加到舞台
stage.addChild(rect);
// 刷新舞台
stage.update();

Shape对象层级关系

// canvas标签设置对应的宽高才能显示全，可在标签添加属性，也可js添加属性，如：
let canvas = document.querySelector('#canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;// 创建舞台，这里是使用元素变量
let stage =new createjs.Stage(canvas);
// 舞台自动更新
createjs.Ticker.on('tick',stage);// 创建Shape对象
let circle1 = new createjs.Shape();
let circle2 = new createjs.Shape();// 一般做放大旋转动画都是先指定x,y位移量,不会使用默认的左上角的圆点
circle1.x = circle1.y = 300;
circle2.x = circle2.y = 200;// 用画笔设置颜色，调用方法画矩形，矩形参数：x,y,w,h
circle1.graphics.beginFill("#58bc58").drawCircle(0,0,150,150);
circle2.graphics.beginFill("pink").drawCircle(0,0,100,100);// 添加到舞台 存入数组
// 添加多个对象会有层级关系，越后面添加的越排前显示
stage.addChild(circle1);
stage.addChild(circle2);// 阴影效果，参数：颜色 x轴像素偏移量 y轴像素偏移量 模糊值
circle2.shadow = new createjs.Shadow("#000",0,0,30);// scaleX,scaleY为shape对象的缩放值属性，执行函数达到缩放效果
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);// 两元素位置互换，即互换其在中数组位置
stage.swapChildren(circle1,circle2);// 根据元素下标互换两个元素
stage.swapChildrenAt(0,1);// 获取元素的下标值，因为一般不容易得知该shape对象的下标
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');
});

更新性能问题

// 舞台自动更新，会不断执行，消耗性能
createjs.Ticker.on('tick',stage);// 只更新一次,需要再次更新时设置update为true
var update = true;
function tick(event) {if (update) {update = false; stage.update(event);}
}

高亮效果

// 创建容器，set设置偏移量
let container = new createjs.Container().set({x:100,y:100
});// 循环生产正方形，存入容器
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);
// 允许执行MouseOver事件
stage.enableMouseOver(10);// 事件绑定，可以on，也可以addEventListener
container.on('mouseover',(e)=>{e.target.fillCommand.style = 'pink';
})container.on('mouseout',(e)=>{e.target.fillCommand.style = 'green';
})

进度条案例

<!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; // 执行间隔var LOADER_WIDTH = 400;  // 进度条宽度var percentLoaded = 0; //进度百分比init();function init(){setupStage(); // 设置舞台buildLoaderBar(); // 创建加载条startLoad(); // 开始加载条}// 设置舞台函数function setupStage() {stage = new createjs.Stage('canvas');// 手动刷新舞台createjs.Ticker.addEventListener('tick', runGame);createjs.Ticker.setFPS(60);}function runGame(e) {stage.update();}// 创建加载条函数function buildLoaderBar() {loaderBar = new createjs.Shape();loaderBar.x = loaderBar.y = 50;;// 设置笔画的宽度/指定描边颜色/画图loaderBar.graphics.setStrokeStyle(2).beginStroke().drawRect(0, 0, LOADER_WIDTH, 40);// 添加到舞台stage.addChild(loaderBar);}// 运行加载条函数function startLoad() {loadInterval = setInterval(updateLoad, 50);}function updateLoad(){// 百分比数值叠加percentLoaded += .005;// 重新画进度条updateLoadBar();// 条满时清楚定时器if (percentLoaded >= 1){clearInterval(loadInterval);stage.removeChild(loaderBar);}}function updateLoadBar() {// 进度的矩形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;// 获取当前鼠标位置rect.addEventListener('mousedown', function(e) {// 定义全局变量 e.stageX/Y 即为鼠标当前坐标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是持续触发的事件，避免oldX和e.stageX之间的差值剧增而重新赋值// 总之就是更新坐标oldX = e.stageX;oldY = e.stageY;})stage.addChild(rect);}})</script>
</head>
<body><canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

旋转案例

旋转用到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);// 设置shape对象相对stage的偏移量square.x = square.y = 100;stage.addChild(square);// 设置注册点的偏移量，没设置就按默认的左上角(0,0)旋转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>

CreateJs-EaselJs基础相关推荐

入门createjs———EaselJS模块基本介绍
EaselJS模块 EaselJS的官方地址 http://www.createjs.com/#!/EaselJS(国内打开比较慢,所以可以....) 下面也为了方便大家提供了个人的地址: Easel ...
createjs开发h5游戏: 指尖大冒险
之前看到一个指尖冒险游戏,觉得挺有意思,就想学习一下怎么实现,毕竟当产经提出类似的需求时,问我等开发可不可以实现的时候,不至于回答不知道. 本文的主要思路,参考的是凹凸实验室的这篇文章:H5游戏开发: ...
html5游戏制作raf,HTML5之弧度角度与sincos(五角星绘制)、Canvas图形组合、阴影、图像绘制及createJS应用...
弧度与sin及cos的关系目的: 通过理解弧度与sin及cos的关系,可以根据弧度及半径求出旋转指定弧度后所到达的dx,dy坐标弧度(angle)与角度(degree)的关系: 360角度 = 2 ...
把Illustrator矢量图转化为代码:Drawscript
2019独角兽企业重金招聘Python工程师标准>>> DrawScript是一款Illustrator插件,可以将Illustrator的矢量图片转换成代码,目前免费,支持转换的语 ...
2018个人年终总结
=====我的2018===== 2018-12-30 又到年末了,说到年末,一般会有两种理解,新历的和旧历的. 我们的上一辈中,还会将旧历作为日常使用,我们这一辈估计已经大多生活在新历中了. 我自己 ...
如何使用Createjs来编写HTML5游戏（八）通过继承扩展EaselJS中的基础元素
从我第一天了解到javascript开始,就听说在这里是没有类的.其实一开始我是沮丧的,尽管我并不知道有没有"类"对编程究竟有多大影响,不过有缺憾总是让人感觉遗憾,哪怕这是一个你可 ...
canvas 动画库 CreateJs 之 EaselJS（上篇）
本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
如何使用Createjs来编写HTML5游戏（二）使用EaselJS处理图片
如何使用EaselJS载入图片并进行简单的处理除了使用EaselJS中的Shape()来创建图形,EaselJS中还提供Bitmap可以很方便的载入图片,同Shape一样只需要创建一个Bitmap实 ...
canvas 动画库 CreateJs 之 EaselJS（下篇）
本文来自网易云社区作者:田亚楠继承对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类.实现方法有很多种,下面介绍其中之一. 举例:实现一个继承于 Containe ...

CreateJs-EaselJs基础

EaselJs

基本创建步骤

Shape对象层级关系

线

createJs事件

更新性能问题

高亮效果

进度条案例

拖拽案例

旋转案例

CreateJs-EaselJs基础相关推荐

最新文章

热门文章