新蒲京200.c软件下载-app官网网址 > 问答 >

未经俺许可

生机勃勃篇小说带您快速入门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(State of Qatar,代码如下:

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(canvasState of Qatar; //成立叁个Shape对象,此处也得以创建文字Text,成立图片Bitmap var rect = new createjs.Shape(卡塔尔; //用画笔设置颜色,调用方法画矩形,矩形参数:x,y,w,h rect.graphics.beginFill("#f00"卡塔尔国.drawRect(0, 0, 100, 100卡塔尔(قطر‎; //增添到舞台 stage.addChild(rectState of Qatar; //刷新舞台 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、Pepsi-Cola等此外的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(shapeState of Qatar; 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等指标,都得以直接行使add伊夫ntListener进行事件监听

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

打赏协理自身写出更多好小说,感激!

打赏小编

打赏帮忙自身写出越多好小说,多谢!

任选生机勃勃种支付情势

图片 5 图片 6

1 赞 3 收藏 2 评论

关于小编:陈被单

图片 7

热爱前端,招待沟通 个人主页 · 作者的篇章 · 19 ·   

图片 8