CreateJs入门必知必会
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();
这样矩形就动起来了。
但是有一个需要注意的地方,如果我们做的是放大或者旋转动画就有问题了。如图:
默认是基于坐标圆点缩放的,默认它的圆点是在左上角的,所以一般做动画都是先指定x,y不会使用默认的圆点的。
- 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';
- })
效果如图:
最后要说的
最后附上几个我之前做的demo。代码略渣。
demo1demo2(点击小圆球)demo3demo4
剩下的就去查API吧,如果还是有些不太明白的,就看代码,看别人写的或者从官方Github上面下载的压缩包里面有demo,看看用法,结合API来学。
真羡慕你们能看到我写的教程,虽然说不是很详细,但是我觉得基本思路应该解释清楚了。想当年,我自己学这个库的时候,真是一个人瞎琢磨,花了好些时间才会用了,要是不点赞(喜欢),好意思吗。
CreateJs入门必知必会相关推荐
- 脑残式网络编程入门(三):HTTP协议必知必会的一些知识
为什么80%的码农都做不了架构师?>>> 本文原作者:"竹千代",原文由"玉刚说"写作平台提供写作赞助,原文版权归"玉刚说&q ...
- SpringBoot入门到精通_第6篇 _必知必会
接上一篇:SpringBoot入门到精通_第5篇 _SpringBoot Actuator监控 https://blog.csdn.net/weixin_40816738/article/detail ...
- SpringBoot入门到精通_第7篇 _必知必会总结
接上一篇:SpringBoot入门到精通_第6篇 _必知必会
- asp sql ip地址排序_SQL必知必会读书笔记,30分钟入门SQL!
点击上方SQL数据库开发,关注获取SQL视频教程 SQL专栏 SQL数据库基础知识汇总 SQL数据库高级知识汇总 来源:https://segmentfault.com/p/1210000011760 ...
- mysql必知必会_《MySQL必知必会》学习小结
关于SQL,之前通过sqlzoo的题目,完成了入门,也仅仅是入门而已. 最近都在忙着投简历和找新的数据分析项目做(为了练python和面试的时候有的聊),所以SQL放了一段时间没练.目前的工作用不到, ...
- 风控成长之路---必知必会工具与业务
关注 "番茄风控大数据",获取更多数据分析与风控大数据的实用干货. 偶然翻开多年前的笔记,当时踏入数据行业就是从人生的第一条select的代码开始.还好多年前做的笔记,网络云盘还为 ...
- mysql日期维表sql文件_《MySQL必知必会》笔记(SQL练习+建表语句)
站在巨人的肩上 Standing On Shoulders Of Giants 部分转自:https://www.jianshu.com/p/294502893128 https://blog.csd ...
- Python 程序员必知必会的开发者工具
Python 程序员必知必会的开发者工具 Python已经演化出了一个广泛的生态系统,该生态系统能够让Python程序员的生活变得更加简单,减少他们重复造轮的工作.同样的理念也适用于工具开发者的工作, ...
- MySQL必知必会pdf
下载地址:网盘下载 内容简介 · · · · · · <MySQL必知必会>MySQL是世界上最受欢迎的数据库管理系统之一.书中从介绍简单的数据检索开始,逐步深入一些复杂的内容,包括联结 ...
- 性能调优之JMH必知必会1:什么是JMH
性能调优之JMH必知必会1:什么是JMH JMH必知必会系列文章(持续更新) 一.前言 二.什么是JMH 1.JMH简介 2.JMH入门 3.使用JMH进行微基准测试 JMH必知必会系列文章(持续更新 ...
最新文章
- 从2019 AI顶会最佳论文,看深度学习的理论基础
- SpringCloud_RibbonHystrixFeign
- 黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery1)
- 47 求1+2+3+4+...+n
- Little Sub and Traveling
- 物理搬砖问题_搬砖姿势:风法
- MySQL数据库如何管理与维护_mysql数据库的管理与维护
- 递归-输出字符串所有的组合情况(代码、分析、汇编)
- 前端学习(2656):vue2中用v-model实现
- android110 jni01
- JavaScript-RegExp及String的正则表达式处理方法
- 如何在VMware Workstation上安装Windows Home Server Beta“ Vail”
- 解决 Office 2007/2010 安装错误:1402 安装程序无法打开注册表项 UNKNOWN\Components\“随机数字”
- 3ds Max 文件修改版本工具
- 第22次 CCF CSP认证一二题题解及感悟
- 当AI学会共情,港科大新研究赋予Chatbot同理心 | 一周AI最火论文
- srand c语言,C语言srand()rand()
- 如何通俗解释Docker是什么?
- 计算机无法识别ipad,ipad连接电脑没反应怎么办 ipad air连接电脑无法识别解决办法...
- C++面试题目及面试经验