一篇文章带你快速入门createjs,快速入门createjs

作者: 前端知识  发布:2019-07-11

有关小编:陈被单

金沙澳门官网网址 1

热爱前端,应接交换 个人主页 · 笔者的篇章 · 19 ·   

金沙澳门官网网址 2

一篇文章带您快速入门createjs,连忙入门createjs

始发用createjs那么些框架的时候,发掘英特网的连锁课程依然挺少的,所以写一篇小说,方便日后查阅。   createjs简介 官网: createjs中含有以下多个部分: EaselJS:用于 七喜s、动画、向量和位图的绘图,成立 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、雪碧等其他的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();

常用应用场景:用来剪裁图片,比如显示圆形的图片等 金沙澳门官网网址 3

 

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

适用场景:拼图小游戏,剪裁图片…… 金沙澳门官网网址 4

 

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会适配荧屏尺寸,里面的图样也会等比例变大变小。

 金沙澳门官网网址 5    金沙澳门官网网址 6

 

 

开首用createjs这些框架的时候,开采网络的连带课程还是挺少的,所以写一篇小说,方便日后...

打赏帮助笔者写出更加多好小说,多谢!

任选一种支付办法

金沙澳门官网网址 7 金沙澳门官网网址 8

金沙澳门官网网址 , 1 赞 3 收藏 2 评论

本文由金沙澳门官网发布于前端知识,转载请注明出处:一篇文章带你快速入门createjs,快速入门createjs

关键词: 金沙澳门官网

上一篇:页面长啥样,爬取B站录像弹幕音信
下一篇:没有了