# CreateJs入门必知必会

createjs.Ticker.timingMode = createjs.Ticker.RAF;
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 rect = new createjs.Shape();
//用画笔设置颜色，调用方法画矩形，矩形参数猜都猜出来了：x,y,w,h
rect.graphics.beginFill('#f00').drawRect(0, 0, 100, 100);
//添加到舞台
stage.addChild(rect);

function loop () {
    rect.x++;
    if(rect.x == 100){
        rect.x = 0;
    }
    requestAnimationFrame(loop);
}
loop();

let circle = new createjs.Shape();
circle.x = circle.y = 300;
circle.graphics.beginFill('#f00').drawCircle(0, 0, 100, 100);
stage.addChild(circle);
function loop () {
    circle.scaleX += 0.01;
    circle.scaleY += 0.01;
    if(circle.scaleX >= 2){
        circle.scaleX = 1;
        circle.scaleY = 1;
    }
    requestAnimationFrame(loop);
}
loop();

createjs.Tween.get(circle,{loop:true})
		.wait(1000)
		.to({x:100,y:100},1000)
		.wait(1000)
		.to({scaleX:1.5},1000)
		.wait(1000)
		.to({scaleY:1.5},1000)
		.wait(1000)
		.to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceIn)
		.wait(1000)
		.to({x:0,y:0},1000);

//所以，比如有红色和蓝色两个圆，要想让红色在上面就要后添加红色，就只能
stage.addChild(blue);
stage.addChild(red);

//当然，作为一个强大的canvas库，还有其他方法，可以设置元素的层级
stage.setChildIndex(red,1);

//还可以互换两个元素的位置
stage.swapChildren(blue,red);

//还可以根据元素下标来互换两个元素
stage.swapChildrenAt(0,1);

//然而有时候你可能并不知道元素的下标，所以你可以这样
stage.getChildIndex(red)  //1

//还有一些获取子元素的方法
addChild，addChildAt，getChildAt，getChildByName

//还可以获取元素的大小,不过这个方法不支持获取Shape对象的大小，其他图片，文字啥的可以。
getBounds()

//还有删除子元素的方法
removeChild，removeChildAt

//还有阴影类,Shadow
red.shadow = new createjs.Shadow('#000', 0, 0, 30);

//还可以画虚线,20是每个虚线的长，10是虚线的间隔，直线就是去掉setStrokeDash这个方法
let line = new createjs.Shape();
line.graphics.setStrokeDash([20, 10], 0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);

//还有遮罩，就是溢出隐藏那种效果。
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);
//线的遮罩，这样，只能看到线条的100px长。
line.mask = rect;
stage.addChild(line);//遮罩不需要添加

//注意点：

//用到mouseOver事件的时候需要加一句
stage.enableMouseOver(10);

//要让移动端支持createjs的点击等鼠标事件时需要加上
createjs.Touch.enable(stage);

//移除事件需要特殊注意一下，移除的时候，参数不是事件函数，而是监听事件的返回值。可以放在对象的一个自定义属性上面。方便。
rect.handleClick = rect.on('click',() => {
    console.log('点击事件');
});
rect.off('click',rect.handleClick);

//在CreateJs里面透明的地方是不响应事件的，这样就实现了事件委托。比如做一个高亮效果，直接给容器加一个事件。
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('red').command;
	rect.graphics.rect(0, 0, 100, 100);
	container.addChild(rect); 
}
stage.addChild(container);
stage.enableMouseOver(10);
container.on('mouseover',(e) => {
    e.target.fillCommand.style = 'blue';
});
container.on('mouseout',(e) => {
    e.target.fillCommand.style = 'red';
})