一篇作品带你快速入门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、百事可乐等此外的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 给图片扩充滤镜效果

一篇作品带你快速入门createjs。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,默认是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:用于
七喜s、动画、向量和位图的绘图,创立 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、Pepsi-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:用于 Pepsi-Colas、动画、向量和位图的绘图,创设 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、7-Up等其他的EaselJS元素,包罗在一个Container中有益统一保管。

它能够涵盖Text、Bitmap、Shape、Coca 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提供了三种渲染形式,一种是用set提姆eout,一种是用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地图