一个HTML5 Canvas 2D & Dom 动画的demo 兼 性能测试.

fins 2011-02-11
最近写了一些关于HTML5的blog, 由于发到blog首页就不能同步到论坛了, 所以手动转过来吧

=========================


附件到这里下载: http://fins.iteye.com/blog/848577


这个demo很简单:

50个小人(10*5的方阵), 从场地(800*600)左边走到右边 然后折回, 循环反复.

截图如下:



这只是一个简单的动画, 代码中实现了 animation sprite timer game-mainloop
等几个核心的模块(还很粗糙).

如果要扩展成一个游戏引擎, 还要做比较多的工作.

希望这个小demo 可以给那些希望用html5 来实现动画和游戏的朋友一些帮助.

========================
更新内容

对代码进行了重构 现在可以用Dom来实现人物(Sprite)的动画了.
实际测试后, 在当前场景下 性能确实更高.


如果不能下载附件,可以去这下载:
http://u.115.com/file/f7b24dd5ad
========================

查看方法:
用支持html5 canvas的浏览器打开 bench.html文件,
想测试用dom模拟的动画, 可以打开 bench_dom.html (支持IE6)

然后点击 start按钮即可.

注意: 这个测试比较耗费CPU资源, 因为主循环间隔设置的是2毫秒.

===================================================


同时还请大家帮个忙,
帮忙测试一下 这个动画 在你们的机器和浏览器上 的每秒帧数 (左上角变动的数字)
并把结果反馈给我谢谢了.

反馈信息越详细越好,最好包括:
机器CPU主频/核数 操作系统 浏览器版本,
是否开启GPU加速(如果开启的话 那么机器的显卡是什么)

谢谢大家了.

先说一下我的:
CPU : 奔腾 Dual-core, 1.86G
内存 : 2G
OS : win xp sp3
结果:
chrome 10  FPS: 105左右
firefox 3.6  FPS: 18左右
Global site tag (gtag.js) - Google Analytics