一个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左右 |