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里面都有,好好看文档。

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

HTML代码

  1. <canvas id="canvas"></canvas>

JS

  1. let canvas = document.querySelector('#canvas');
  2. canvas.width = window.innerWidth;
  3. canvas.height = window.innerHeight;
  4. //创建舞台
  5. let stage = new createjs.Stage(canvas);
  6. //舞台自动更新
  7. createjs.Ticker.on('tick',stage);
  8. //创建一个Shape对象
  9. let rect = new createjs.Shape();
  10. //用画笔设置颜色,调用方法画矩形,矩形参数猜都猜出来了:x,y,w,h
  11. rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
  12. //添加到舞台
  13. stage.addChild(rect);

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

CreateJs做动效

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

  1. function loop () {
  2. rect.x++;
  3. if(rect.x == 100){
  4. rect.x = 0;
  5. }
  6. requestAnimationFrame(loop);
  7. }
  8. loop();

这样矩形就动起来了。
但是有一个需要注意的地方,如果我们做的是放大或者旋转动画就有问题了。如图:

默认是基于坐标圆点缩放的,默认它的圆点是在左上角的,所以一般做动画都是先指定x,y不会使用默认的圆点的。

  1. let circle = new createjs.Shape();
  2. circle.x = circle.y = 300;
  3. circle.graphics.beginFill("#f00").drawCircle(0, 0, 100, 100);
  4. stage.addChild(circle);
  5. function loop () {
  6. circle.scaleX += 0.01;
  7. circle.scaleY += 0.01;
  8. if(circle.scaleX >= 2){
  9. circle.scaleX = 1;
  10. circle.scaleY = 1;
  11. }
  12. requestAnimationFrame(loop);
  13. }
  14. loop();

然后可以借助动画库来实现一些连贯的动画。CreateJs默认有带了一个动画库tweenjs。这API就不用说了吧,猜都猜到怎么用了。记得要先引入这个动画库

  1. createjs.Tween.get(circle,{loop:true})
  2. .wait(1000)
  3. .to({x:100,y:100},1000)
  4. .wait(1000)
  5. .to({scaleX:1.5},1000)
  6. .wait(1000)
  7. .to({scaleY:1.5},1000)
  8. .wait(1000)
  9. .to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceIn)
  10. .wait(1000)
  11. .to({x:0,y:0},1000);

然后,需要注意的是,如果你添加多个显示对象,他们是有层级关系的,stage对象有个children属性代表子元素,是一个数组,里面的元素层级像下标一样从0开始,简单来说就是后面的覆盖前面的,addChild方法是添加到显示列表的最后。

  1. //所以,比如有红色和蓝色两个圆,要想让红色在上面就要后添加红色,就只能
  2. stage.addChild(blue);
  3. stage.addChild(red);
  4. //当然,作为一个强大的canvas库,还有其他方法,可以设置元素的层级
  5. stage.setChildIndex(red,1);
  6. //还可以互换两个元素的位置
  7. stage.swapChildren(blue,red);
  8. //还可以根据元素下标来互换两个元素
  9. stage.swapChildrenAt(0,1);
  10. //然而有时候你可能并不知道元素的下标,所以你可以这样
  11. stage.getChildIndex(red) //1
  12. //还有一些获取子元素的方法
  13. addChild,addChildAt,getChildAt,getChildByName
  14. //还可以获取元素的大小,不过这个方法不支持获取Shape对象的大小,其他图片,文字啥的可以。
  15. getBounds()
  16. //还有删除子元素的方法
  17. removeChild,removeChildAt
  18. //还有阴影类,Shadow
  19. red.shadow = new createjs.Shadow("#000", 0, 0, 30);
  20. //还可以画虚线,20是每个虚线的长,10是虚线的间隔,直线就是去掉setStrokeDash这个方法
  21. let line = new createjs.Shape();
  22. line.graphics.setStrokeDash([20, 10], 0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);
  23. //还有遮罩,就是溢出隐藏那种效果。
  24. let rect = new createjs.Shape();
  25. rect.graphics.rect(0,0,100,100).closePath();
  26. let line = new createjs.Shape();
  27. line.graphics.setStrokeDash([20, 10], 0).setStrokeStyle(3).beginStroke('red').moveTo(0,0).lineTo(200,0);
  28. //线的遮罩,这样,只能看到线条的100px长。
  29. line.mask = rect;
  30. stage.addChild(line);//遮罩不需要添加

CreateJs事件

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

  1. //注意点:
  2. //用到mouseOver事件的时候需要加一句
  3. stage.enableMouseOver(10);
  4. //要让移动端支持createjs的点击等鼠标事件时需要加上
  5. createjs.Touch.enable(stage);
  6. //移除事件需要特殊注意一下,移除的时候,参数不是事件函数,而是监听事件的返回值。可以放在对象的一个自定义属性上面。方便。
  7. rect.handleClick = rect.on('click',() => {
  8. console.log('点击事件');
  9. });
  10. rect.off('click',rect.handleClick);

高亮效果

  1. //在CreateJs里面透明的地方是不响应事件的,这样就实现了事件委托。比如做一个高亮效果,直接给容器加一个事件。
  2. let container = new createjs.Container().set({
  3. x:100,
  4. y:100
  5. });
  6. for (let i = 0; i < 4; i++) {
  7. let rect = new createjs.Shape().set({
  8. x:100 * i,
  9. y:100 * i
  10. });
  11. rect.fillCommand = rect.graphics.beginFill("red").command;
  12. rect.graphics.rect(0, 0, 100, 100);
  13. container.addChild(rect);
  14. }
  15. stage.addChild(container);
  16. stage.enableMouseOver(10);
  17. container.on('mouseover',(e) => {
  18. e.target.fillCommand.style = 'blue';
  19. });
  20. container.on('mouseout',(e) => {
  21. e.target.fillCommand.style = 'red';
  22. })

效果如图:

最后要说的

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

CreateJs入门必知必会的更多相关文章

  1. 脑残式网络编程入门(三):HTTP协议必知必会的一些知识

    本文原作者:“竹千代”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.前言 无论是即时通讯应用还是传统的信息系统,Http协议都是我们最常打交 ...

  2. .NET零基础入门09:SQL必知必会

    一:前言 仿佛到了更进一步的时候了,每一个程序员迟早都会遇到数据存储的问题.我们拿什么来存储程序产生的数据?举例来说,用什么来存储我们的打老鼠游戏每次的成绩呢?选择如下: 1:内存中.缺点,退出游戏, ...

  3. SpringBoot快速入门(必知必会)

    是什么?能做什么 SpringBoot必知必会 是什么?能做什么 SpringBoot是一个快速开发脚手架 快速创建独立的.生产级的基于Spring的应用程序 SpringBoot必知必会 快速创建应 ...

  4. SQL 必知必会

    本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...

  5. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

  6. [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

    http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...

  7. Android程序员必知必会的网络通信传输层协议——UDP和TCP

    1.点评 互联网发展至今已经高度发达,而对于互联网应用(尤其即时通讯技术这一块)的开发者来说,网络编程是基础中的基础,只有更好地理解相关基础知识,对于应用层的开发才能做到游刃有余. 对于Android ...

  8. 迈向高阶:优秀Android程序员必知必会的网络基础

    1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...

  9. 闻道Go语言,6月龄必知必会

    大家好,我是马甲哥, 学习新知识, 我的策略是模仿-->归纳--->举一反三, 在同程倒腾Go语言一年有余,本次记录<闻道Go语言,6月龄必知必会>,形式是同我的主力语言C#做 ...

  10. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

随机推荐

  1. python-super1

    一.问题的发现与提出 一般子类在继承父类后,若子类覆盖了父类,则只执行子类,不执行父类.如果没有,则执行父类代码. 发现使用super()后,子类,父类都会执行,比较疑惑,记录学习,super知识点 ...

  2. 【API】NetUserEnum-获取系统所有账户名称

    1 说明 该NetUserEnum函数检索服务器上所有用户帐户的信息. 函数原型: NET_API_STATUS NetUserEnum( _In_ LPCWSTR servername, _In_ ...

  3. MYSQL问题解决

    1. MySQL错误日志里出现: 140331 10:08:18 [ERROR] Error reading master configuration 140331 10:08:18 [ERROR] ...

  4. MySQL乱码问题以及utf8mb4字符集

    MySQL乱码问题以及utf8mb4字符集 1.乱码 推荐大家看 深入MySQL字符集设置 ,区分检查client端.server端的编码:最简单暴力的方式,是在所有的环节都显式明确的指定相同的编码, ...

  5. 浅谈js设计模式之迭代器模式

    迭代器模式无非就是循环访问聚合对象中的各个元素.比如 jQuery中的 $.each 函数,其中回调函数中的参数 i 为当前索引, n 为当前元素,代码如下: $.each([1, 2, 3], fu ...

  6. 局域网搭建https局域网

    局域网搭建https局域网 1.使用tomcat作为服务器搭建局域网访问https 需要使用java jdk\bin下的keytool.exe来创建证书 使用命令:keytool -genkenpai ...

  7. VM workstation 与 VM vSphere的区别 [转载]

    在学完vSphere后,想起了VMware Workstation.这两个都是虚拟化的东西,这两者到底有什么本质的不同呢?顺着我的思路我开始将所学过的进行检索期望从中寻到一丝半点的线索.很快大脑中建立 ...

  8. CSU 1948: 超级管理员(普通费用流&&zkw费用流)

    Description 长者对小明施加了膜法,使得小明每天起床就像马丁的早晨一样. 今天小明早上醒来发现自己成了一位仓管员.仓库可以被描述为一个n × m的网格,在每个网格上有几个箱子(可能没有).为 ...

  9. js防止sql注入的参数过滤

    js防止sql注入的参数过滤 <script language="javascript"> <!-- var url = location.search; var ...

  10. 【noip模拟赛3】确定的位置 (map的遍历 位置原理)

    描述 hzy很喜欢了解歌曲的排行榜,他每次都从XX网站获知. 由于这个网站想对这个歌曲的排行榜含蓄的告诉大家,组织了一个“猜榜大赛”. 这个网站宣布一些歌曲的信息,那些歌曲在歌曲榜上的前几名 例如: ...