一篇文章带你快速入门createjs
分类:计算机知识

一篇小说带您快捷入门createjs

2017/06/30 · HTML5 · 2 评论 · createsjs

正文笔者: 威尼斯手机娱乐官网 ,伯乐在线 - 陈被单 。未经作者许可,禁止转发!
应接参与伯乐在线 专栏撰稿人。

初始用createjs这么些框架的时候,发现网络的有关课程依旧挺少的,所以写一篇文章,方便日后查阅。

createjs简介

官网:

createjs中饱含以下三个部分:

EaselJS:用于 Coca Colas、动画、向量和位图的绘图,成立 HTML5 Canvas 上的互相体验(饱含多点触控)

TweenJS:用于做动画效果

SoundJS:音频播放引擎

PreloadJS:网址财富预加载

临近于SoundJS,PreloadJS,假如本人管理起来比较方便的话,也足以和睦写,总的来讲,它们也正是三个扶植成效,可选可不选。由此,本小说主要疏解EaselJS的利用。

1. EaselJS的大致api

  • 画图纸用(Bitmap)
  • 画图片,举个例子矩形,圆形等用(Shape) 【类似于改换坐标x,y,增添阴影shadow,折射率阿尔法,减少放大scaleX/scaleY都能够产生】
  • 画文字,用(Text)
  • 再有容器Container的概念,容器能够分包八个展现对象

2. EaselJS绘图的光景流程

大约流程:成立突显对象→设置有个别参数→调用艺术绘制→加多到舞台→update(),代码如下:

JavaScript

<script src="easeljs-0.7.1.min.js"></script> //引进相关的js文件 <canvas id="canvas"></canvas> var canvas = document.querySelector('#canvas'); //成立舞台 var stage = new createjs.Stage(canvas); //创造贰个Shape对象,此处也足以制造文字Text,创造图片Bitmap var rect = new createjs.Shape(); //用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100); //增多到舞台 stage.addChild(rect); //刷新舞台 stage.update();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="easeljs-0.7.1.min.js"></script>  //引入相关的js文件
<canvas id="canvas"></canvas>
 
var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台  
stage.addChild(rect);
//刷新舞台
stage.update();

graphics能够安装有些样式,线条宽度,颜色等等,也足以调用一些方法绘制图形,举例矩形drawRect,圆形drawCircle等等,具体可以本人查看api。

在意:记得供给求把shape对象加到舞台上,否则显示器上不会展现。

3. Ticker定时器

写createjs明确会遇上的二个,便是ticker,首要正是按时刷新舞台,理想的帧速率是60FPS

JavaScript

createjs.Ticker.setFPS(60);

1
createjs.Ticker.setFPS(60);

 

4. 说了算多个展现对象的层级关系

stage,contain对象有个children属性代表子成分,是一个数组,里面包车型客车因素层级像下标同样从0起先,简单来说就是背后的覆盖前边的,addChild方法是加上到展现列表的尾声。

小编们也能够动态改动children的层叠效果。

JavaScript

stage.setChildIndex(red,1);

1
stage.setChildIndex(red,1);

 

5.容器 container

它可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS成分,富含在四个Container中有益统一管理。

举个例子一位物,他由手,脚,头,肉体组成,你能够将那多少个部分放在同二个container中,统一运动。使用格局也相比轻易:

JavaScript

var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain);

1
2
3
4
var contain = new createjs.Container();
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

 

蹬蹬蹬~本篇作品的主要性,绘制图像并对图像实行管理

6. 绘制图片

var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update();

1
2
3
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

根据上边的EaselJS的例行的绘图流程来讲,下边这段代码应该能够平常突显。不过,只是有个别情形下得以健康展现的,这一个图像能源须求规定加载成功后才可以new,不然不会有图像在画布上,若是有做能源预加载,能够直接行使方面包车型大巴代码,若无,则供给在image加载完毕onload之后才进行绘图

var img = new Image(); img.src = './img/linkgame_pass@2x.png'; img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); }

1
2
3
4
5
6
7
var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () {
var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();
}

独有绘制图片是非常不够的,createjs提供了二种处理图片的艺术:

6.1  给图片扩大遮罩层

动用mask属性,能够只展现图片和shape相交的区域

JavaScript

stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; //遮罩图形 shape = new createjs.Shape(); shape.graphics.beginFill("#000").drawCircle(0, 0, 100); shape.x = 200; shape.y = 100; bg.mask = shape; //给图片bg加多遮罩 stage.addChild(shape); stage.addChild(bg); stage.update();

1
2
3
4
5
6
7
8
9
10
11
12
13
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();

常用应用场景:用来剪裁图片,譬喻显示圆形的图样等

威尼斯手机娱乐官网 1
6.2 给图片增添滤镜效果

JavaScript

var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur];

1
2
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

咱俩开掘,图片照旧尚未变模糊,原因是图表加多了filter后stage立时刷新,filter只可以维持一帧的法力,第二帧filter则失效了。而接纳图片的cache()方法后,能够使得无论舞台怎么刷新,都能够保持住Filter的功用,增加cache还或者有相当多效果,能够加强FPS,缓存等

JavaScript

bg.cache(0,0,bg.image.width,bg.image.height);

1
bg.cache(0,0,bg.image.width,bg.image.height);

 

6.3 使用Rectangle剪裁图片
接纳EaselJS内置的Rectangle对象来创设三个选用框,显示图片的某各部分。

JavaScript

stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10; var rect = new createjs.Rectangle(0, 0, 121, 171); bg.sourceRect = rect; stage.addChild(bg); stage.update();

1
2
3
4
5
6
7
8
stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景:拼图小游戏,剪裁图片……

威尼斯手机娱乐官网 2

7. createjs事件

easeljs事件暗中认可是不援救touch设备的,需求以下代码才支撑:

JavaScript

createjs.Touch.enable(stage);

1
createjs.Touch.enable(stage);

对此Bitmap,Shape等目的,都能够直接使用addEventListener举办事件监听

JavaScript

bitmap = new createjs.Bitmap(''); bitmap.addEventListener(‘click’,handle);

1
2
bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);

 

8. CreateJs的渲染形式

CreateJs提供了三种渲染形式,一种是用setTimeout,一种是用requestAnimationFrame,暗中认可是setTimeout,暗许的帧数是20,一般的话还没啥,不过要是动画多以来,设置成requestAnimationFrame情势以来,就能够以为到到动画如丝般的流畅。

JavaScript

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

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

9.适配

在活动端支付中,不得不面前境遇贰个多显示器,多尺寸的标题,所以适配难点显得极其重大。

JavaScript

<canvas id="game" width="1000" height="700"></canvas>

1
&lt;canvas id="game" width="1000" height="700"&gt;&lt;/canvas&gt;

瞩目,以上代码的width,height差别于css中的width,height。

比如说,你在canvas内部绘制图片,用x,y轴进行固定,这里的x,y是龃龉于canvas这几个欧洲经济共同体。

我们再把canvas当成一整张图片应用css进行适配

JavaScript

canvas{ width: 100%; }

1
2
3
canvas{
     width: 100%;
}

那就是说,就能够有以下的功能,canvas会适配荧屏尺寸,里面包车型客车图纸也会等比例变大变小。

 威尼斯手机娱乐官网 3    威尼斯手机娱乐官网 4

打赏帮助自个儿写出更加多好小说,多谢!

打赏小编

一篇小说带您快捷入门createjs,快速入门createjs

初阶用createjs那一个框架的时候,开掘网络的有关课程仍然挺少的,所以写一篇小说,方便日后查看。   createjs简介 官网: createjs中蕴涵以下多个部分: EaselJS:用于 Sprites、动画、向量和位图的绘图,创设 HTML5 Canvas 上的互动体验(包涵多点触控) TweenJS:用于做动画效果 SoundJS:音频播放引擎 PreloadJS:网址能源预加载   类似于SoundJS,PreloadJS,假设协调解和管理理起来相比有利的话,也足以友善写,总的来讲,它们也正是一个救助功效,可选可不选。由此,本小说首要批注EaselJS的选用。     1. EaselJS的大致api

  • 画图纸用(Bitmap)
  • 画图片,举例矩形,圆形等用(Shape) 【类似于改动坐标x,y,扩展阴影shadow,折射率阿尔法,减少放大scaleX/scaleY都足以成功】
  • 画文字,用(Text)
  • 还会有容器Container的定义,容器能够包含多少个显示对象

  2. EaselJS绘图的光景流程 大概流程:创造展现对象→设置有个别参数→调用艺术绘制→增添到舞台→update(),代码如下:

<script src="easeljs-0.7.1.min.js"></script>  //引入相关的js文件
<canvas id="canvas"></canvas>

var canvas = document.querySelector('#canvas');
//创建舞台
var stage = new createjs.Stage(canvas);
//创建一个Shape对象,此处也可以创建文字Text,创建图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台  
stage.addChild(rect);
//刷新舞台
stage.update();

graphics可以设置某些体制,线条宽度,颜色等等,也足以调用一些措施绘制图形,比如矩形drawRect,圆形drawCircle等等,具体能够团结查看api。

瞩目:记得要求求把shape对象加到舞台上,不然显示屏上不会议及展览示。     3. Ticker定时器 写createjs断定会凌驾的一个,就是ticker,首要正是按时刷新舞台,理想的帧速率是60FPS 

createjs.Ticker.setFPS(60);  

 

4. 说了算七个显示对象的层级关系 stage,contain对象有个children属性代表子成分,是三个数组,里面包车型地铁成分层级像下标一样从0初叶,简单的说就是前面包车型大巴遮蔽前边的,addChild方法是加多到体现列表的末段。 我们也足以动态改换children的层叠效果。

stage.setChildIndex(red,1);

 

5.容器 container 它能够包涵Text、Bitmap、Shape、Coca Cola等别的的EaselJS成分,满含在一个Container中有益统一管理。 举个例子一职员,他由手,脚,头,肉体组成,你能够将那多少个部分放在同三个container中,统一运动。使用方法也比较轻易:

var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

 

蹬蹬蹬~本篇小说的首要,绘制图像并对图像进行拍卖

6. 制图图片

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

依据地点的EaselJS的健康的绘图流程来讲,上边这段代码应该可以不奇怪显示。可是,只是有个别景况下得以健康彰显的,这一个图像财富必要规定加载成功后才方可new,不然不会有图像在画布上,若是有做财富预加载,能够直接使用方面包车型客车代码,如果未有,则要求在image加载完结onload之后才举行绘图

var img = new Image();
img.src = './img/[email protected]';
img.onload = function () {
 var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

 仅仅绘制图片是相当不够的,createjs提供了两种管理图片的点子:

 

6.1  给图片增添遮罩层 使用mask属性,能够只展现图片和shape相交的区域

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/[email protected]");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();

常用应用场景:用来剪裁图片,比方突显圆形的图形等 威尼斯手机娱乐官网 5

 

6.2 给图片增添滤镜效果

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

咱俩发现,图片还是尚未变模糊,原因是图形加多了filter后stage立时刷新,filter只好维持一帧的作用,第二帧filter则失效了。而接纳图片的cache()方法后,能够使得无论舞台怎么刷新,都能够保持住Filter的服从,增添cache还会有十分多职能,可以增加FPS,缓存等

bg.cache(0,0,bg.image.width,bg.image.height);

 

6.3 使用Rectangle剪裁图片
动用EaselJS内置的Rectangle对象来成立一个选用框,展现图片的某各部分。

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/[email protected]");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景:拼图小游戏,剪裁图片…… 威尼斯手机娱乐官网 6

 

7. createjs事件

easeljs事件暗中认可是不扶助touch设备的,须要以下代码才支撑:

createjs.Touch.enable(stage);

对于Bitmap,Shape等目的,都能够平昔运用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener(‘click’,handle);

 

8. CreateJs的渲染方式 CreateJs提供了三种渲染情势,一种是用setTimeout,一种是用requestAnimationFrame,私下认可是setTimeout,暗中认可的帧数是20,一般的话还没啥,不过只要动画多以来,设置成requestAnimationFrame情势以来,就能够觉获得动画如丝般的流畅。     9.适配 在移动端支付中,不得不面临五个多显示屏,多尺寸的标题,所以适配难点显得非常首要性。

<canvas id="game" width="1000" height="700"></canvas>

瞩目,以上代码的width,height差别于css中的width,height。

诸如,你在canvas内部绘制图片,用x,y轴实行定点,这里的x,y是对峙于canvas那几个欧洲经济共同体。

我们再把canvas当成一整张图纸应用css进行适配

canvas{
     width: 100%;
}

那正是说,就能够有以下的效果,canvas会适配显示器尺寸,里面包车型客车图片也会等比例变大变小。

 威尼斯手机娱乐官网 7    威尼斯手机娱乐官网 8

 

 

起先用createjs这一个框架的时候,开掘英特网的连带课程如故挺少的,所以写一篇小说,方便日后...

打赏协理自个儿写出更加的多好小说,多谢!

任选一种支付方式

威尼斯手机娱乐官网 9 威尼斯手机娱乐官网 10

1 赞 3 收藏 2 评论

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:一篇文章带你快速入门createjs

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文