CreateJs-EaselJs基础
CreateJs内包含四个部分：EaselJS、TweenJS 、SoundJS 、PrloadJS
对应的JS文件可在github上搜索到
easeJs的API
参考的学习链接 createjs入门到精通，后面章节需要付费，以下是其免费章节部分内容为参考编写，案例在教程中都有，这里进行了些注释和改动。
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';
})
进度条案例
<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>
拖拽案例
<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，需要引入
<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，并不会显示，如果要显示，就需要Shape
var 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>