一篇文章带您火速入门createjs,快捷入门createjs

一篇小说带您火速入门createjs

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

本文小编: 伯乐在线 –
陈被单
。未经小编许可,禁止转发!
迎接参加伯乐在线 专栏小编。

起头用createjs那个框架的时候,发现网上的相干课程依旧挺少的,所以写一篇小说,方便日后查阅。

createjs简介

官网:

createjs中隐含以下三个部分:

EaselJS:用于 7-Ups、动画、向量和位图的绘图,创立 HTML5 Canvas
上的交互体验(包涵多点触控)

TweenJS:用于做动画效果

SoundJS:音频播放引擎

PreloadJS:网站资源预加载

类似于SoundJS,PreloadJS,假使自己处理起来相比较方便的话,也得以团结写,总的来说,它们相当于一个增援作用,可选可不选。因而,本作品主要讲解EaselJS的使用。

1. EaselJS的大致api

  • 画图纸用(Bitmap)
  • 画图片,比如矩形,圆形等用(Shape)
    【类似于改变坐标x,y,增加阴影shadow,透明度alpha,减少放大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、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(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);

 

一篇文章带您火速入门createjs,快捷入门createjs。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提供了二种渲染情势,一种是用set提姆eout,一种是用requestAnimationFrame,默许是set提姆eout,默许的帧数是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:用于
7-Ups、动画、向量和位图的绘图,成立 HTML5 Canvas
上的相互体验(包含多点触控) TweenJS:用于做动画效果
SoundJS:音频播放引擎 PreloadJS:网站资源预加载  
类似于SoundJS,PreloadJS,若是协调处理起来比较便利的话,也足以团结写,总的来说,它们相当于一个救助功效,可选可不选。由此,本小说首要讲解EaselJS的使用。
    1. EaselJS的大致api

  • 画图片用(Bitmap)
  • 画图纸,比如矩形,圆形等用(Shape)
    【类似于改变坐标x,y,扩充阴影shadow,透明度alpha,减弱放大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等目的,都足以直接采取add伊芙ntListener举办事件监听

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

 

8. CreateJs的渲染格局
CreateJs提供了三种渲染方式,一种是用set提姆eout,一种是用requestAnimationFrame,默许是set提姆eout,默许的帧数是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那几个框架的时候,发现网上的相干学科依然挺少的,所以写一篇小说,方便日后…

发端用createjs那个框架的时候,发现网上的有关课程依然挺少的,所以写一篇小说,方便日后查看。

开班用createjs那些框架的时候,发现网上的连带学科依然挺少的,所以写一篇文章,方便日后查阅。

打赏协理我写出越来越多好作品,谢谢!

任选一种支付办法

亚洲必赢官网 9
亚洲必赢官网 10

1 赞 3 收藏 2
评论

 

 

关于小编:陈被单

亚洲必赢官网 11

热爱前端,欢迎互换
个人主页 ·
我的稿子 ·
19 ·
  

亚洲必赢官网 12

createjs简介

createjs简介

官网:

官网:

createjs中蕴藏以下多少个部分:

createjs中富含以下八个部分:

EaselJS:用于 Sprites、动画、向量和位图的绘图,创造 HTML5 Canvas
上的交互体验(包含多点触控)

EaselJS:用于 Coca Colas、动画、向量和位图的绘图,创造 HTML5 Canvas
上的彼此体验(包蕴多点触控)

TweenJS:用于做动画效果

TweenJS:用于做动画效果

SoundJS:音频播放引擎

SoundJS:音频播放引擎

PreloadJS:网站资源预加载

PreloadJS:网站资源预加载

 

 

就好像于SoundJS,PreloadJS,若是协调处理起来相比较有利的话,也可以友善写,总的来说,它们约等于一个相助功用,可选可不选。由此,本小说主要讲解EaselJS的采纳。

好像于SoundJS,PreloadJS,要是自己处理起来比较便宜的话,也足以友善写,总的来说,它们相当于一个协助作用,可选可不选。因而,本小说主要讲解EaselJS的采纳。

 

 

 

 

1. EaselJS的大致api

1. EaselJS的大致api

  • 画图纸用(Bitmap)
  • 画图片,比如矩形,圆形等用(Shape)
    【类似于改变坐标x,y,增添阴影shadow,透明度alpha,缩短放大scaleX/scaleY都可以做到】
  • 画文字,用(Text)
  • 再有容器Container的定义,容器可以包含七个展现对象
  • 画图纸用(Bitmap)
  • 画图纸,比如矩形,圆形等用(Shape)
    【类似于改变坐标x,y,增添阴影shadow,透明度alpha,缩短放大scaleX/scaleY都足以形成】
  • 画文字,用(Text)
  • 还有容器Container的概念,容器可以涵盖多个显示对象

 

 

2. EaselJS绘图的大约流程

2. EaselJS绘图的差不多流程

几乎流程:创建显示对象→设置有些参数→调用艺术绘制→添加到舞台→update(),代码如下:

大体流程:创制突显对象→设置有些参数→调用艺术绘制→添加到舞台→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();
<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。

graphics可以设置有些体裁,线条宽度,颜色等等,也得以调用一些办法绘制图形,比如矩形drawRect,圆形drawCircle等等,具体能够协调查看api。

只顾:记得一定要把shape对象加到舞台上,否则屏幕上不会显得。

小心:记得一定要把shape对象加到舞台上,否则屏幕上不会显示。

 

 

 

 

3. Ticker定时器

3. Ticker定时器

写createjs肯定会遇到的一个,就是ticker,首要就是定时刷新舞台,理想的帧速率是60FPS 

写createjs肯定会遭受的一个,就是ticker,首要就是定时刷新舞台,理想的帧速率是60FPS 

createjs.Ticker.setFPS(60);  
createjs.Ticker.setFPS(60);  

 

 

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

4. 控制三个显示对象的层级关系

stage,contain对象有个children属性代表子元素,是一个数组,里面的要素层级像下标一样从0早先,简单的说就是前边的遮盖前面的,addChild方法是增加到显示列表的末梢。

stage,contain对象有个children属性代表子元素,是一个数组,里面的元素层级像下标一样从0先河,简单的话就是末端的覆盖前边的,addChild方法是添加到浮现列表的最终。

俺们也足以动态改变children的层叠效果。

我们也足以动态改变children的层叠效果。

stage.setChildIndex(red,1);
stage.setChildIndex(red,1);

 

 

5.容器 container

5.容器 container

它能够涵盖Text、Bitmap、Shape、Sprite等其他的EaselJS元素,包涵在一个Container中有益统一管理。

它可以分包Text、Bitmap、Shape、Pepsi-Cola等其余的EaselJS元素,包含在一个Container中有益统一管理。

譬如一个人物,他由手,脚,头,身体组成,你可以将那多少个部分放在同一个container中,统一运动。使用方式也相比较简单:

诸如一个人物,他由手,脚,头,身体组成,你能够将这个部分放在同一个container中,统一运动。使用方法也相比较简单:

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

 

 

蹬蹬蹬~本篇文章的重中之重,绘制图像并对图像进行拍卖

蹬蹬蹬~本篇文章的要紧,绘制图像并对图像举行拍卖

6. 制图图片

6. 绘制图片

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

依据上边的EaselJS的正规的绘图流程来说,下边这段代码应该可以健康显示。可是,只是有些情形下可以正常展现的,那些图像资源要求确定加载成功后才可以new,否则不会有图像在画布上,借使有做资源预加载,能够直接选拔方面的代码,假设没有,则须要在image加载已毕onload之后才开展绘图

根据地方的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();
}
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提供了两种处理图片的方式:

 仅仅绘制图片是不够的,createjs提供了两种处理图片的办法:

 

 

6.1  给图片伸张遮罩层

6.1  给图片增添遮罩层

动用mask属性,可以只突显图片和shape相交的区域

应用mask属性,可以只展现图片和shape相交的区域

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();
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();

常用应用场景:用来剪裁图片,比如突显圆形的图样等

常用应用场景:用来剪裁图片,比如呈现圆形的图形等

亚洲必赢官网 13

亚洲必赢官网 14

 

 

6.2 给图片增添滤镜效果

6.2 给图片扩充滤镜效果

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

大家发现,图片仍旧没有变模糊,原因是图片添加了filter后stage马上刷新,filter只可以保持一帧的功效,第二帧filter则失效了。而选择图片的cache()方法后,可以使得无论舞台怎么刷新,都足以保证住Filter的成效,添加cache还有许多效益,可以坚实FPS,缓存等

我们发现,图片仍然没有变模糊,原因是图片添加了filter后stage马上刷新,filter只好保持一帧的法力,第二帧filter则失效了。而选取图片的cache()方法后,可以使得无论舞台怎么刷新,都足以保证住Filter的成效,添加cache还有为数不少意义,可以增加FPS,缓存等

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

 

 

6.3 使用Rectangle剪裁图片
选取EaselJS内置的Rectangle对象来创设一个选取框,突显图片的某各部分。

6.3 使用Rectangle剪裁图片
运用EaselJS内置的Rectangle对象来创立一个选拔框,显示图片的某各部分。

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();
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();

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

亚洲必赢官网 ,适用场景:拼图小游戏,剪裁图片……

亚洲必赢官网 15

亚洲必赢官网 16

 

 

7. createjs事件

7. createjs事件

easeljs事件默许是不支持touch设备的,需求以下代码才支撑:

easeljs事件默许是不援救touch设备的,需求以下代码才支撑:

createjs.Touch.enable(stage);
createjs.Touch.enable(stage);

对此Bitmap,Shape等目的,都得以直接运用add伊芙ntListener进行事件监听

对于Bitmap,Shape等目标,都得以一向动用add伊夫ntListener举行事件监听

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

 

 

8. CreateJs的渲染格局

8. CreateJs的渲染情势

CreateJs提供了二种渲染情势,一种是用set提姆eout,一种是用requestAnimationFrame,默许是set提姆eout,默许的帧数是20,一般的话还没啥,然则一旦动画多的话,设置成requestAnimationFrame形式以来,就会深感到动画如丝般的流畅。

CreateJs提供了二种渲染格局,一种是用setTimeout,一种是用requestAnimationFrame,默许是set提姆eout,默许的帧数是20,一般的话还没啥,可是假若动画多以来,设置成requestAnimationFrame格局以来,就会感到到动画如丝般的流畅。

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

 

 

9.适配

9.适配

在移动端支付中,不得不面对一个多显示屏,多尺寸的难题,所以适配难题显得尤其首要。

在活动端支出中,不得不面对一个多屏幕,多尺寸的标题,所以适配难题显得尤其首要性。

先固定canvas的width为750,依据设备的高宽比设置相应750宽的高,然后用css将canvas的缩放或拉伸整个显示器,那种办法能够有限支撑canvas内部的因素的逻辑尺寸大小不爆发变化,也能达标适配

先固定canvas的width为750,依照设备的高宽比设置相应750宽的高,然后用css将canvas的缩放或拉伸整个荧屏,那种方法可以有限支撑canvas内部的因素的逻辑尺寸大小不暴发变化,也能达到适配

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

小心,以上代码的width,height分裂于css中的width,height。

专注,以上代码的width,height分化于css中的width,height。

比如,你在canvas内部绘制图片,用x,y轴进行稳定,那里的x,y是对峙于canvas那几个共同体。

例如,你在canvas内部绘制图片,用x,y轴进行一定,那里的x,y是绝对于canvas这么些全部。

俺们再把canvas当成一整张图片接纳css进行适配

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

canvas{
     width: 100%;
}
canvas{
     width: 100%;
}

那么,就会有以下的作用,canvas会适配显示器尺寸,里面的图样也会等比例变大变小。

那就是说,就会有以下的作用,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。

 亚洲必赢官网 17 
  亚洲必赢官网 18

 亚洲必赢官网 19 
  亚洲必赢官网 20

 

 

 

 

网站地图xml地图