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

最新推荐文章于 2023-11-01 09:07:56 发布

fins

最新推荐文章于 2023-11-01 09:07:56 发布

阅读量328

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： HTML5 Chrome 游戏 Firefox 浏览器

本文链接：https://blog.youkuaiyun.com/fins/article/details/83799891

web前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍了一个简单的HTML5动画Demo，包含50个小人从场地左边走到右边再折回的动画效果。通过此Demo展示了animation、sprite、timer及game-mainloop等核心模块的应用，并分享了使用DOM实现动画的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个demo很简单:

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

截图如下:
[img]http://fins.iteye.com/upload/picture/pic/78386/8c2ed9e9-a342-332b-9524-de984c03782e.gif[/img]

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

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

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

========================
[color=red]更新内容

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

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

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

然后点击 start按钮即可.

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

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

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

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

谢谢大家了.

先说一下我的:
CPU : 奔腾 Dual-core, 1.86G
内存 : 2G
OS : win xp sp3
结果:
chrome 10 FPS: 105左右
firefox 3.6 FPS: 18左右