CreateJs入门必知必会

Canvas a'ゞ『完美』 2年前 (2017-06-02) 3563次浏览 已收录 2个评论 扫描二维码

CreateJS 介绍

CreateJS 是基于 HTML5 开发的一套模块化的库和工具。
基于这些库,可以非常快捷地开发出基于 HTML5 的游戏、动画和交互应用。
CreateJS 主要包含如下四个类库:

  • EaselJS – 简化处理 HTML5 画布(核心)
  • TweenJS – 用来帮助调整 HTML5 和 Javascript 属性
  • SoundJS – 用来简化处理 HTML5 audio
  • PreloadJS – 帮助管理和协调加载中的一些资源

CreateJS 官网:http://createjs.com/
CreateJs 中文网:http://www.createjs.cc/

学习 CreateJs 第一步,先要看文档

CreateJs 提供了一些显示类:

  • 画图片用(Bitmap)
  • 画图形,比如矩形,圆形等用(Shape)
  • 画文字,用(Text)
  • 还有容器 Container 的概念,容器可以包含多个显示对象,就像 div 标签一样,都有局部带动全局的功能。
  • …等

使用 CreateJs 理解一些概念就好办多了,它有一个显示列表,其中 Stage 是显示列表的顶级容器,然后是 Container,再之后就是各种 Shape 了。
这些显示类都是集成自 DisplayObject 类,它是一个抽象类,不能直接构造,它定义了核心的属性和方法,比如:x,y,alpha,rotation,scaleX,scaleY 等。
所以:看文档可以先看看 DisplayObject 类,然后去看看 Stage 舞台类,然后看看 Container 类,然后就是画图形的 Shape 类等其他类,先看构造函数需要传什么参数,再看看有哪些属性和方法。Ticker 类也可以看看。

CreateJs 一些 API 作用

要画图首先要引入这个库没毛病吧,然后实例化一个舞台。
然后你要画一个图形,就找Shape 的文档,文档上写的很清楚怎么画一个图形。
new 一个 Shape 对象,用它的属性 graphics,我叫它画笔。它就相当于 Graphics 类,所以关于它的方法可以去看 Graphics 类的 API。
graphics 可以设置一些样式,线条宽度,颜色等等,还可以调用一些方法绘制图形,画矩形 rect 或者 drawRect 都可以。画圆形 arc 或者 drawCircle 都可以,arc 还可以画扇形。
但是这样页面是不会有任何反应的,还需要把这个 Shape 对象添加到舞台上去,这时候页面还是没有反应,因为添加上去还要渲染,需要用舞台调用 update 方法。CreateJs 提供了 tick 事件,会自动 update。
这里也得提一下,CreateJs 提供了两种渲染模式,一种是用 setTimeout,一种是用 requestAnimationFrame,默认是 setTimeout,默认的帧数是 20,一般的话还没啥,但是如果你设置成 requestAnimationFrame 模式的话,就会感觉到动画如丝般的流畅,差距一眼就看出来了。这些 API 里面都有,好好看文档。

createjs.Ticker.timingMode = createjs.Ticker.RAF;

HTML 代码

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

这就是用 CreateJs 画图的一个大概流程:创建显示对象→设置一些参数→调用方法绘制→添加到舞台→update()
画圆形也一样,只不过调用的方法变了。

CreateJs 做动效

CreateJs 就是封装了 canvas 的 API 让绘图变得简单好用,canvas 做动效的原理就是不停的绘制不同的场景。
对于 CreateJs 来说就是改变这些显示对象的属性值,比如 x,y 累加移动 1px,就可以做移动的效果,还可以改变透明度:alpha,缩放:scaleX,scaleY,扭曲:skewX,skewY,旋转:rotation 等等。
接着上面的代码

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

这样矩形就动起来了。
但是有一个需要注意的地方,如果我们做的是放大或者旋转动画就有问题了。如图:
CreateJs 入门必知必会
默认是基于坐标圆点缩放的,默认它的圆点是在左上角的,所以一般做动画都是先指定 x,y 不会使用默认的圆点的。
CreateJs 入门必知必会

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 默认有带了一个动画库 tweenjs。这 API 就不用说了吧,猜都猜到怎么用了。记得要先引入这个动画库

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 对象有个 children 属性代表子元素,是一个数组,里面的元素层级像下标一样从 0 开始,简单来说就是后面的覆盖前面的,addChild 方法是添加到显示列表的最后。

//所以,比如有红色和蓝色两个圆,要想让红色在上面就要后添加红色,就只能
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);//遮罩不需要添加

CreateJs 事件

CreateJs 事件使用也很方便,像 jq 一样的事件绑定和移除方式:on 和 off

//注意点:

//用到 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';
})

效果如图:
CreateJs 入门必知必会

最后要说的

最后附上几个我之前做的 demo。代码略渣。
demo1demo2(点击小圆球)demo3demo4
剩下的就去查 API 吧,如果还是有些不太明白的,就看代码,看别人写的或者从官方 Github 上面下载的压缩包里面有 demo,看看用法,结合 API 来学。
真羡慕你们能看到我写的教程,虽然说不是很详细,但是我觉得基本思路应该解释清楚了。想当年,我自己学这个库的时候,真是一个人瞎琢磨,花了好些时间才会用了,要是不点赞(喜欢),好意思吗。


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明CreateJs 入门必知必会
喜欢 (26)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 你真厉害~~
    小可爱2019-04-08 15:47 回复 Mac OS X | Chrome 73.0.3683.86
  2. 写个高级点
    小江2017-06-28 21:52 回复 未知操作系统 | Chrome 17.0.558.0