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

本文介绍了一个简单的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左右
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值