随笔- 297  文章- 81  评论- 804 

前面曾经记录过Canvas的基础知识《让自己也能使用Canvas》,在实际使用中,用封装好的库效率会高点。

使用成熟的库还能对基础知识有更深入的理解,CreateJS是基于HTML5开发的一套模块化的库和工具,有4个模块,github地址在这里

最近看到有个中文网,很多API都翻译了出来,不过就是翻译的比较生硬。

我参考了国外写的一本书《HTML5.Games.with.CreateJS》,再根据自己的一些理解整理了一下这个库的使用。

下面所有的demo代码都可以在这里查看到

 

一、Stage

Stage(舞台)就是展现图形、执行动画的地方,必须先创建Stage,然后才能做后续操作。

有两种方式的初始化:

stage = new createjs.Stage(document.getElementById('canvas'));
stage = new createjs.Stage('canvas');//直接使用canvas的ID

接下来就是添加图形等布置操作,等到你布置好舞台后,就需要调用“update”方法,展示新的舞台内容。

stage.update();

 

二、Ticker

Ticker类是一个定时器,主要就是定时刷新舞台,理想的帧速率是60FPS,在这个类中也可以手动的修改这个速度。

var stage;
function init() {
  stage = new createjs.Stage('canvas');//直接使用canvas的ID
  createjs.Ticker.addEventListener("tick", runGame);
  createjs.Ticker.setFPS(60);
}
function runGame(e) {
  stage.update();
}

如果想控制“runGame”中的刷新,可以设置暂停。

“setPaused”方法可以修改“e”中的“paused”属性。

createjs.Ticker.setPaused(true);
function runGame(e) {
  if(!e.paused)
    stage.update();
}

 

三、Graphics

1)初始化方式

接下来可以画一些图出来,Graphics类可以画矢量图(vector)或位图(bitmap)。

var g = new createjs.Graphics();
g.beginStroke('#000');
g.beginFill('#FF6600');
g.drawRect(0,0,100,100);

也可以链式的写法。

var g = new createjs.Graphics().beginStroke('#000').beginFill('#FF6600').drawRect(0,0,100,100);

Graphics类仅仅提供了画图,但并不会显示,如果要显示,就需要“Shape”类的帮忙。

 

2)简写

Graphics类中的画图方法还有简写:

 

四、Shape

1)制作图形

一旦你创建了一个Graphics类,你就需要Shape类,下面的代码接上面的“g”。

var square = new createjs.Shape(g);
square.x = square.y = 100;
stage.addChild(square);

除了正方形,还可以有三角形、圆、多边形等,详细的代码可以在这里看到

 

2)简单的动画

使用动画就会引入TweenJS模块,将会用到上面画正方形的Graphics代码,多了下面两句代码。

//绕着图形中心滚动
square.regX = square.regY = 50;//设置图形的X和Y轴位移 
createjs.Tween.get(square).to({
    rotation: 360
}, 3000);

 

五、一个UI元素demo

接下来制作一个常见的加载条,当年上传、打开某个程序或做其它操作经常能看到,详细代码可以在这里查看到

1)制作过程

先设置舞台,再创建创建加载条,最后用定时器累加加载条长度,其实也可以直接在Ticker事件中累加长度,只是速度会快一点。

function init() {
  setupStage();//设置舞台
  buildLoaderBar();//创建加载条
  startLoad();//用定时器累加加载条长度
}

用链式写法来写更新长度的那段代码,“updateLoaderBar”是在“startLoad”函数中的。

function updateLoaderBar() {
  loaderBar.graphics.beginFill('#00ff00').drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40).endFill();
  loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
}

先是画里面的蓝色,再画边框。

beginFillendFill组合使用了一下,endFill是指重新开始画,使得后面的设置不会影响当前的。

如果我去掉endFill,将会直接显示完整的绿色,因为后面的“drawRect(0, 0, LOADER_WIDTH, 40)”,又设置了一遍宽度。

beginStrokeendStroke组合使用,目的和上面的差不多。

如果把“endStroke”去掉,就会发现多了根右边框,之所以会多是前面的“drawRect”影响了展示。

 

2)一点小改造

后面再观察一下发现,其实可以不用每次来画边框,边框可以在“buildLoaderBar”函数中定义。

function buildLoaderBar() {
        loaderBar = new createjs.Shape();
        loaderBar.x = loaderBar.y = 100;
        loaderBar.graphics.setStrokeStyle(2).beginStroke("#000").drawRect(0, 0, LOADER_WIDTH, 40).endStroke();
        stage.addChild(loaderBar);
}

相应的“updateLoaderBar”函数也要做些修改,drawRect中的X、Y坐标要修改下,宽度也要改变下。

本来以为设置了边宽为2,那么也要偏移2,但其实不是,只需要偏移1就行了。

function updateLoaderBar() {
        loaderBar.graphics.beginFill('#00ff00').drawRect(1, 1, LOADER_WIDTH * percentLoaded - 2, 38).endFill();
}

如果我把边框的宽度改成4,偏移和宽度又要重新计算了,怪不得写在里面,就方便多了。

 

 posted on 2016-05-03 10:02  咖啡机(K.F.J)  阅读(4870)  评论(2编辑  收藏