前面曾经记录过Canvas的基础知识《让本身也能使用Canvas》,在实际使用中,用封装好的库效率会高点。html
使用成熟的库还能对基础知识有更深刻的理解,CreateJS是基于HTML5开发的一套模块化的库和工具,有4个模块,github地址在这里。git
最近看到有个中文网,不少API都翻译了出来,不过就是翻译的比较生硬。github
我参考了国外写的一本书《HTML5.Games.with.CreateJS》,再根据本身的一些理解整理了一下这个库的使用。canvas
下面全部的demo代码均可以在这里查看到。模块化
Stage(舞台)就是展示图形、执行动画的地方,必须先建立Stage,而后才能作后续操做。函数
有两种方式的初始化:工具
stage = new createjs.Stage(document.getElementById('canvas')); stage = new createjs.Stage('canvas');//直接使用canvas的ID
接下来就是添加图形等布置操做,等到你布置好舞台后,就须要调用“update”方法,展现新的舞台内容。动画
stage.update();
Ticker类是一个定时器,主要就是定时刷新舞台,理想的帧速率是60FPS,在这个类中也能够手动的修改这个速度。ui
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”中的刷新,能够设置暂停。spa
“setPaused”方法能够修改“e”中的“paused”属性。
createjs.Ticker.setPaused(true); function runGame(e) { if(!e.paused) stage.update(); }
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类中的画图方法还有简写:
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);
接下来制做一个常见的加载条,当年上传、打开某个程序或作其它操做常常能看到,详细代码能够在这里查看到。
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(); }
先是画里面的蓝色,再画边框。
beginFill和endFill组合使用了一下,endFill是指从新开始画,使得后面的设置不会影响当前的。
若是我去掉endFill,将会直接显示完整的绿色,由于后面的“drawRect(0, 0, LOADER_WIDTH, 40)”,又设置了一遍宽度。
beginStroke和endStroke组合使用,目的和上面的差很少。
若是把“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,偏移和宽度又要从新计算了,怪不得写在里面,就方便多了。