潭州学院HTML5各引擎显示效率比较Word文件下载.docx

1、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=ccci;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-$time1000）25.fps=$count;26.$time=now;27.$count=0;28.29.ctx.fillText（fps,1,

2、20）;30.setTimeout（draw,1）;31.得到测试结果如下图结果，裸奔的情况下，显示15000张图片，FPS在28左右。2，createJS1.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_f

3、ps,$time,$count=0;8.varimages=;9.varstage;10.functionhandleFileLoad（o）11.if（o.type=image）12.imageso.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.

4、bitmap.y=Math.random（）*480-10;22.stage.addChild（bitmap）;23.24._fps=newcreatejs.Text（0,90016pxArial#ffffff25.stage.addChild（_fps）;26.$time=newDate（）.getTime（）;27.createjs.Ticker.addEventListener（tick,tick）;29.functiontick（）30.$count+;31.varnow=newDate（）.getTime（）;32.if（now-$time33._fps.text=fps:+Math

5、.round（$count*10000/（now-$time）/10;34.$time=now;35.$count=0;36.37.stage.update（）;38.结果，createJS显示15000张图片，FPS大约在17左右3，cocos2d-html51.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（）.getW

6、inSize（）;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.in

7、it（）;25.26.）;结果，cocos2d-html5显示15000张图片，FPS大约在19左右4，lufylegend.js1.init（10,mylegend,320,480,main）;2.functionmain（）3.varloader=newLLoader（）;4.loader.addEventListener（LEvent.COMPLETE,loadBitmapdata）;5.loader.load（bitmapData6.7.functionloadBitmapdata（event）8.varbitmapData=newLBitmapData（event.currentTa

8、rget）;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.js1.enchant（）;2.window.onload=function（）3.varcore=ne

9、wGame（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（）;

10、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+FPS23.fps=0;24.oldTime=newTime;27.;28.core.start（）;29.;结果，enchant.js显示15000张图片，FPS大约在13左右得出结论，在显示图片上，各个引擎的效率如下裸奔

11、lufylegend.js cocos-html5 createJS enchant.js二，文字显示效率比较测试内容，随机在页面上显示500个文字对象，并且随机设置它们的颜色和旋转。1，createJS2.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.rand

12、om（）+pxArial10.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（#00000017.stage.addChild（_fps）;18.$time=newDate（）.getTime（）;19.createjs.Ticker.addEventListener（21.funct

13、iontick（）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.else36.returnrandomColor（）;37.38.;结果，createJS显示500个文字，FPS大约在12左右2，enchant.js5.core.onload=function（）6.for（vari=0;7.varlabel=newLabel（）;8.

14、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（）

15、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.else38.returnrandomColor（）;39.40.;结果，enchant.js显示

16、500个文字，FPS大约在12左右3，lufylegend.js3.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=new

17、FPS（）;14.addChild（fps）;16.functionrandomColor（）17.varrand=Math.floor（Math.random（）*0xFFFFFF）.toString（16）;18.if（rand.length=6）19.returnrand;20.else21.returnrandomColor（）;22.结果，lufylegend.js显示500个文字，FPS大约在21左右4.cocos2d-html511.this._super（）;12.varlabel=cc.LabelTTF.create（）;13.label.setFontName（Arial1

18、4.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.varMySc

19、ene=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=newLTe

20、xtField（）;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.bit

21、map.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.else27.returnrandomColor（）;29.得到测试结果显示，lufylegend.js显示500个文字时，如果先将文字转换为图片，则FPS大约在146左右因为在canvas中显示图片要比文字的效率高很多，所以先把文字转换为图片后再显示，可以让效果达得到质的飞跃。而这种做法在lufylegend.js里也可以轻松实现。结论，在显示文字上，各个引擎的效率如下lufylegend.js（将文字转换为LBi