潭州学院HTML5各引擎显示效率比较Word文件下载.docx
《潭州学院HTML5各引擎显示效率比较Word文件下载.docx》由会员分享，可在线阅读，更多相关《潭州学院HTML5各引擎显示效率比较Word文件下载.docx（21页珍藏版）》请在冰豆网上搜索。
12.x=Math.random（）*320-10;
13.y=Math.random（）*480-10;
14.ccc.push（{x:
x,y:
y}）;
15.}
16.functiondraw（）{
17.for（vari=0;
18.varco=ccc[i];
19.ctx.drawImage（img,0,0,20,20,co.x,co.y,20,20）;
20.}
21.
22.$count++;
23.varnow=newDate（）.getTime（）;
24.if（now-$time>
1000）{
25.fps=$count;
26.$time=now;
27.$count=0;
28.}
29.ctx.fillText（fps,1,20）;
30.setTimeout（draw,1）;
31.}
得到测试结果如下图
结果，裸奔的情况下，显示15000张图片，FPS在28左右。
2，createJS
1.varcanvas=document.getElementById（"
2.varmanifest=[{id:
"
s_CloseNormal"
src:
}];
3.varloader=newcreatejs.PreloadJS（false）;
4.loader.onFileLoad=handleFileLoad;
5.loader.onComplete=handleComplete;
6.loader.loadManifest（manifest）;
7.var_fps,$time,$count=0;
8.varimages=[];
9.varstage;
10.functionhandleFileLoad（o）{
11.if（o.type=="
image"
）{
12.images[o.id]=o.result;
13.}
14.}
15.functionhandleComplete（）{
16.stage=newcreatejs.Stage（canvas）;
17.createjs.Ticker.setFPS（30）;
18.for（vari=0;
19.varbitmap=newcreatejs.Bitmap（images["
]）;
20.bitmap.x=Math.random（）*320-10;
21.bitmap.y=Math.random（）*480-10;
22.stage.addChild（bitmap）;
23.}
24._fps=newcreatejs.Text（"
0"
"
90016pxArial"
#ffffff"
25.stage.addChild（_fps）;
26.$time=newDate（）.getTime（）;
27.createjs.Ticker.addEventListener（"
tick"
tick）;
29.functiontick（）{
30.$count++;
31.varnow=newDate（）.getTime（）;
32.if（now-$time>
33._fps.text="
fps:
+Math.round（$count*10000/（now-$time））/10;
34.$time=now;
35.$count=0;
36.}
37.stage.update（）;
38.}
结果，createJS显示15000张图片，FPS大约在17左右
3，cocos2d-html5
1.varMyLayer=cc.Layer.extend（{
2.isMouseDown:
false,
3.helloImg:
null,
4.helloLabel:
5.circle:
6.sprite:
7.init:
function（）{
8.this._super（）;
9.varsize=cc.Director.getInstance（）.getWinSize（）;
10.for（vari=0;
11.varsprite=cc.Sprite.create（s_CloseNormal）;
12.sprite.setPosition（size.width*Math.random（）,size.height*Math.random（））;
13.this.addChild（sprite,0）;
15.
16.}
17.}）;
18.
19.varMyScene=cc.Scene.extend（{
20.onEnter:
21.this._super（）;
22.varlayer=newMyLayer（）;
23.this.addChild（layer）;
24.layer.init（）;
25.}
26.}）;
结果，cocos2d-html5显示15000张图片，FPS大约在19左右
4，lufylegend.js
1.init（10,"
mylegend"
320,480,main）;
2.functionmain（）{
3.varloader=newLLoader（）;
4.loader.addEventListener（LEvent.COMPLETE,loadBitmapdata）;
5.loader.load（"
bitmapData"
6.}
7.functionloadBitmapdata（event）{
8.varbitmapData=newLBitmapData（event.currentTarget）;
9.for（vari=0;
10.varbitmap=newLBitmap（bitmapData）;
11.bitmap.x=Math.random（）*LGlobal.width-10;
12.bitmap.y=Math.random（）*LGlobal.height-10;
13.addChild（bitmap）;
15.varfps=newFPS（）;
16.addChild（fps）;
17.}
结果，lufylegend.js显示15000张图片，FPS大约在25左右
5，enchant.js
1.enchant（）;
2.window.onload=function（）{
3.varcore=newGame（320,480）;
4.core.fps=30;
5.core.preload（'
CloseNormal.png'
）
6.core.onload=function（）{
7.for（vari=0;
8.varbear=newenchant.Sprite（20,20）;
9.bear.image=core.assets['
];
10.bear.moveTo（Math.random（）*320-10,Math.random（）*480-10）;
11.core.rootScene.addChild（bear）;
12.}
13.
14.varoldTime=newDate（）;
15.vartext=newLabel（）;
16.core.rootScene.addChild（text）;
17.varfps=0;
18.core.addEventListener（'
enterframe'
function（）{
19.fps++;
20.varnewTime=newDate（）;
21.if（newTime.getTime（）-oldTime.getTime（）>
=1000）{
22.text.text=fps+"
FPS"
23.fps=0;
24.oldTime=newTime;
27.};
28.core.start（）;
29.};
结果，enchant.js显示15000张图片，FPS大约在13左右
得出结论，在显示图片上，各个引擎的效率如下
裸奔>
lufylegend.js>
cocos-html5>
createJS>
enchant.js
二，文字显示效率比较
测试内容，随机在页面上显示500个文字对象，并且随机设置它们的颜色和旋转。
1，createJS
2.var_fps,$time,$count=0;
3.varstage;
4.test（）;
5.functiontest（）{
6.stage=newcreatejs.Stage（canvas）;
7.createjs.Ticker.setFPS（30）;
8.for（vari=0;
500;
9.varlabel=newcreatejs.Text（"
HTML5各引擎效率比较"
（10+20*Math.random（））+"
pxArial"
10.label.color=randomColor（）;
11.label.rotation=180*Math.random（）/Math.PI;
12.label.x=Math.random（）*320-50;
13.label.y=Math.random（）*480;
14.stage.addChild（label）;
16._fps=newcreatejs.Text（"
#000000"
17.stage.addChild（_fps）;
18.$time=newDate（）.getTime（）;
19.createjs.Ticker.addEventListener（"
21.functiontick（）{
25._fps.text="
29.stage.update（）;
30.}
31.functionrandomColor（）{
32.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;
33.if（rand.length==6）{
34.returnrand;
35.}else{
36.returnrandomColor（）;
37.}
38.};
结果，createJS显示500个文字，FPS大约在12左右
2，enchant.js
5.core.onload=function（）{
6.for（vari=0;
7.varlabel=newLabel（）;
8.label.text="
9.label.color=randomColor（）;
10.label.font=（10+20*Math.random（））+"
14.core.rootScene.addChild（label）;
16.
17.varoldTime=newDate（）;
18.vartext=newLabel（）;
19.core.rootScene.addChild（text）;
20.varfps=0;
21.core.addEventListener（'
22.fps++;
23.varnewTime=newDate（）;
24.if（newTime.getTime（）-oldTime.getTime（）>
25.text.text=Math.round（fps*10000/（newTime.getTime（）-oldTime.getTime（）））/10+"
26.fps=0;
27.oldTime=newTime;
29.}）;
30.};
31.core.start（）;
32.};
33.functionrandomColor（）{
34.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;
35.if（rand.length==6）{
36.returnrand;
37.}else{
38.returnrandomColor（）;
39.}
40.};
结果，enchant.js显示500个文字，FPS大约在12左右
3，lufylegend.js
3.for（vari=0;
4.varlabel=newLTextField（）;
5.label.text="
6.label.size=10+20*Math.random（）;
7.label.color=randomColor（）;
8.label.rotate=180*Math.random（）/Math.PI;
9.label.x=Math.random（）*LGlobal.width-50;
10.label.y=Math.random（）*LGlobal.height;
11.addChild（label）;
13.varfps=newFPS（）;
14.addChild（fps）;
16.functionrandomColor（）{
17.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;
18.if（rand.length==6）{
19.returnrand;
20.}else{
21.returnrandomColor（）;
22.}
结果，lufylegend.js显示500个文字，FPS大约在21左右
4.cocos2d-html5
11.this._super（）;
12.varlabel=cc.LabelTTF.create（）;
13.label.setFontName（"
Arial"
14.label.setFontSize（10+20*Math.random（））;
15.label.setString（"
16.label.setColor（cc.c3b（255*Math.random（）,255*Math.random（）,255*Math.random（）））;
17.label.setRotation（180*Math.random（）/Math.PI）;
18.this.addChild（label）;
19.label.setPosition（size.width*Math.random（）,size.height*Math.random（））;
23.}）;
24.
25.varMyScene=cc.Scene.extend（{
26.onEnter:
27.this._super（）;
28.varlayer=newMyLayer（）;
29.this.addChild（layer）;
30.layer.init（）;
32.}）;
40.}
得到测试结果，cocos2d-html5显示500个文字，FPS大约在90左右
此结果让我吃了一惊，cocos2d-html5达到了惊人的90fps，你一定会问，为什么？
稍等，我们把lufylegend.js的测试代码稍作改动，来再次测试一下，测试代码如下。
1.init（1,"
4.varsprite=newLSprite（）;
5.varlabel=newLTextField（）;
6.label.text="
7.label.size=10+20*Math.random（）;
8.label.color=randomColor（）;
9.sprite.addChild（label）;
10.
11.varbitmapData=newLBitmapData（null,0,0,label.getWidth（）,label.getHeight（））;
12.bitmapData.draw（sprite）;
13.varbitmap=newLBitmap（bitmapData）;
14.bitmap.rotate=180*Math.random（）/Math.PI;
15.bitmap.x=Math.random（）*LGlobal.width-50;
16.bitmap.y=Math.random（）*LGlobal.height;
17.addChild（bitmap）;
18.}
19.varfps=newFPS（）;
20.addChild（fps）;
21.}
22.functionrandomColor（）{
23.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;
24.if（rand.length==6）{
25.returnrand;
26.}else{
27.returnrandomColor（）;
29.}
得到测试结果显示，lufylegend.js显示500个文字时，如果先将文字转换为图片，则FPS大约在146左右
因为在canvas中显示图片要比文字的效率高很多，所以先把文字转换为图片后再显示，可以让效果达得到质的飞跃。
而这种做法在lufylegend.js里也可以轻松实现。
结论，在显示文字上，各个引擎的效率如下
lufylegend.js（将文字转换为LBi
升级会员 