fins
- 浏览: 2583377 次
- 性别:
- 来自: 小胖儿的大城
-
文章分类
最新评论
-
ni4wangba0：
ni4wangba0 写道亲测，算法有问题。对不起，其实是我自 ...
谈谈"求线段交点"的几种算法(js实现,完整版) -
ni4wangba0：
亲测，算法有问题。
谈谈"求线段交点"的几种算法(js实现,完整版) -
kers007：
苹果不让Webapp 在appstore 里发布，我不知道对 ...
苹果真的要在 AppStore 里封杀 WebApp 吗? -
striveandlive：
fins = js大牛
[原创]GT-Template, 一个超轻量级的js模板工具. -
AlwaysYang：
基础扎实的才能行走天下。
关于body的"大小"在ie和ff下的一些基础知识
这个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左右
我本意主要是指“setinterval和settimeout时间不准”的问题的确存在。
也许，我是说也许，在你的机子上setinterval(fn,0)， setinterval(fn,5)， setinterval(fn,10) 的效果是一样的。为什么说是也许呢，因为我实测发现，
这个跟电脑的速度有关，你的cpu高，空闲资源越多，这个定时就能更小。
是这样的
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左右
- canvas_dom_game_test.zip (79.5 KB)
- 下载次数: 281
分享到：
评论
14 楼
suolan
2011-03-17
win7 ie9正式版 2G i5
cpu 只占2-3%
而且发现个问题，貌似IE9在最小化或隐藏情况下cpu资源会释放掉，FF和chrome就差一些。莫非微软这回真得给力了？？？
（要在文档头加上<!DOCTYPE html>不然IE9不认，这也说明微软这次真得的是超级无奈支持html5，否则按照ie原来的代码兼容习惯肯定能过）
cpu 只占2-3%
而且发现个问题，貌似IE9在最小化或隐藏情况下cpu资源会释放掉，FF和chrome就差一些。莫非微软这回真得给力了？？？
（要在文档头加上<!DOCTYPE html>不然IE9不认，这也说明微软这次真得的是超级无奈支持html5，否则按照ie原来的代码兼容习惯肯定能过）
13 楼
cuixiping
2011-01-04
fins 写道
to 9 楼 :
6楼的观点中 80%都是错误的
6楼自己已经认识到他的错误了, 你还在这里说"是这样的"...囧...
之前和6楼在群里也有讨论,
在这个场景中 用dom肯定会快
但是原因不是他写的那些
我们不能根据结果来反过来想原因.
6楼的观点中 80%都是错误的
6楼自己已经认识到他的错误了, 你还在这里说"是这样的"...囧...
之前和6楼在群里也有讨论,
在这个场景中 用dom肯定会快
但是原因不是他写的那些
我们不能根据结果来反过来想原因.
我本意主要是指“setinterval和settimeout时间不准”的问题的确存在。
也许，我是说也许，在你的机子上setinterval(fn,0)， setinterval(fn,5)， setinterval(fn,10) 的效果是一样的。为什么说是也许呢，因为我实测发现，
这个跟电脑的速度有关，你的cpu高，空闲资源越多，这个定时就能更小。
12 楼
yorkane
2010-12-24
winxp Dell 6500
intel core2 duo 2.4GHZ 4G RAM
Chrome9 bench_dom.html 205-220
Chrome9 bench.html 150-165
Firefox3.6 bench.html 65-75
Firefox3.6 bench_dom.html 85-95
intel core2 duo 2.4GHZ 4G RAM
Chrome9 bench_dom.html 205-220
Chrome9 bench.html 150-165
Firefox3.6 bench.html 65-75
Firefox3.6 bench_dom.html 85-95
11 楼
ice.k
2010-12-24
X201 I5-540
bench.htm Chrome 10 190左右
bench_dom.html Chrome 10 240左右
bench.htm Chrome 10 190左右
bench_dom.html Chrome 10 240左右
10 楼
fins
2010-12-23
to 9 楼 :
6楼的观点中 80%都是错误的
6楼自己已经认识到他的错误了, 你还在这里说"是这样的"...囧...
之前和6楼在群里也有讨论,
在这个场景中 用dom肯定会快
但是原因不是他写的那些
我们不能根据结果来反过来想原因.
6楼的观点中 80%都是错误的
6楼自己已经认识到他的错误了, 你还在这里说"是这样的"...囧...
之前和6楼在群里也有讨论,
在这个场景中 用dom肯定会快
但是原因不是他写的那些
我们不能根据结果来反过来想原因.
9 楼
cuixiping
2010-12-22
gongxiaohu 写道
我是群里的晓浒
其实setinterval和settimeout都有默认最小刷新速率,传递时间为0测试空代码的fps结果
ie 60
chrome10 250
ff4 100
但是这些都不是系统最高速度,而是不同浏览器的js引擎限制死的。
你可以同时写多个setinterval(fn,0)来测试，发现每个都能达到默认最高的fps(例如chrome10中每个setinterval都能达到250的fps).
所以在js中按照一般游戏框架写统一的interval或者timeout刷新是达不到最高效能的,应该每个需要渐变的过程都是一个单独的interval和timeout。
因为canvas相关函数调用是阻塞式的.所以效率不及dom相关操作
ctx.drawImage(...) ->会阻塞js引擎代码，直到返回
dom.style.left+=1; ->单纯的加法很快,js引擎会继续执行下去。真正的渲染引擎是在另外一个线程中，不会阻塞js的执行。
性能方面的第二个原因是canvas的img对象其实每次都是需要构造一个html dom的Image对象的，然后才能进行操作。
这段动画如果通过dom的background切换做动画，改变left,top的值做移动，理论fps是满值的，直到渲染器的速度跟不上js代码的速度为止.
其实setinterval和settimeout都有默认最小刷新速率,传递时间为0测试空代码的fps结果
ie 60
chrome10 250
ff4 100
但是这些都不是系统最高速度,而是不同浏览器的js引擎限制死的。
你可以同时写多个setinterval(fn,0)来测试，发现每个都能达到默认最高的fps(例如chrome10中每个setinterval都能达到250的fps).
所以在js中按照一般游戏框架写统一的interval或者timeout刷新是达不到最高效能的,应该每个需要渐变的过程都是一个单独的interval和timeout。
因为canvas相关函数调用是阻塞式的.所以效率不及dom相关操作
ctx.drawImage(...) ->会阻塞js引擎代码，直到返回
dom.style.left+=1; ->单纯的加法很快,js引擎会继续执行下去。真正的渲染引擎是在另外一个线程中，不会阻塞js的执行。
性能方面的第二个原因是canvas的img对象其实每次都是需要构造一个html dom的Image对象的，然后才能进行操作。
这段动画如果通过dom的background切换做动画，改变left,top的值做移动，理论fps是满值的，直到渲染器的速度跟不上js代码的速度为止.
是这样的
8 楼
fins
2010-12-22
另一个朋友:
chrome 160左右
firefox30左右
CPU 奔腾双核E6500 3.93GHz
内存4G winxp
chrome 160左右
firefox30左右
CPU 奔腾双核E6500 3.93GHz
内存4G winxp
7 楼
fins
2010-12-22
回6楼 :
你的说法是错误的.
错误原因我已经在群里和你说过了 呵呵.
你的说法是错误的.
错误原因我已经在群里和你说过了 呵呵.
6 楼
gongxiaohu
2010-12-21
我是群里的晓浒
其实setinterval和settimeout都有默认最小刷新速率,传递时间为0测试空代码的fps结果
ie 60
chrome10 250
ff4 100
但是这些都不是系统最高速度,而是不同浏览器的js引擎限制死的。
你可以同时写多个setinterval(fn,0)来测试，发现每个都能达到默认最高的fps(例如chrome10中每个setinterval都能达到250的fps).
所以在js中按照一般游戏框架写统一的interval或者timeout刷新是达不到最高效能的,应该每个需要渐变的过程都是一个单独的interval和timeout。
因为canvas相关函数调用是阻塞式的.所以效率不及dom相关操作
ctx.drawImage(...) ->会阻塞js引擎代码，直到返回
dom.style.left+=1; ->单纯的加法很快,js引擎会继续执行下去。真正的渲染引擎是在另外一个线程中，不会阻塞js的执行。
性能方面的第二个原因是canvas的img对象其实每次都是需要构造一个html dom的Image对象的，然后才能进行操作。
这段动画如果通过dom的background切换做动画，改变left,top的值做移动，理论fps是满值的，直到渲染器的速度跟不上js代码的速度为止.
其实setinterval和settimeout都有默认最小刷新速率,传递时间为0测试空代码的fps结果
ie 60
chrome10 250
ff4 100
但是这些都不是系统最高速度,而是不同浏览器的js引擎限制死的。
你可以同时写多个setinterval(fn,0)来测试，发现每个都能达到默认最高的fps(例如chrome10中每个setinterval都能达到250的fps).
所以在js中按照一般游戏框架写统一的interval或者timeout刷新是达不到最高效能的,应该每个需要渐变的过程都是一个单独的interval和timeout。
因为canvas相关函数调用是阻塞式的.所以效率不及dom相关操作
ctx.drawImage(...) ->会阻塞js引擎代码，直到返回
dom.style.left+=1; ->单纯的加法很快,js引擎会继续执行下去。真正的渲染引擎是在另外一个线程中，不会阻塞js的执行。
性能方面的第二个原因是canvas的img对象其实每次都是需要构造一个html dom的Image对象的，然后才能进行操作。
这段动画如果通过dom的background切换做动画，改变left,top的值做移动，理论fps是满值的，直到渲染器的速度跟不上js代码的速度为止.
5 楼
jasongreen
2010-12-21
archlinux
intel T200 2.0
firefox 3.6 50-70 fps
firefox 4.0pre8 82-88 fps (很稳定)
intel T200 2.0
firefox 3.6 50-70 fps
firefox 4.0pre8 82-88 fps (很稳定)
4 楼
fins
2010-12-21
CPU负荷高 是因为主循环之间的间隔我设置的太小了 (为了测试出极限效果 呵呵)
对于这个动画而言, SLEEP设置成15--25之间都可以接受.
可以去bench.html里 修改变量 SLEEP 的值.
对于这个动画而言, SLEEP设置成15--25之间都可以接受.
可以去bench.html里 修改变量 SLEEP 的值.
3 楼
jasongreen
2010-12-21
cpu占用 50%-70%
2 楼
jasongreen
2010-12-21
archlinux
intel T7200 2.0G
chrome 9.0.597.0
memory 3G
120 - 140 fps, 开始的时候曾经160，后面稳定在120-140，cpu占用在50%，windows下相当于25%
intel T7200 2.0G
chrome 9.0.597.0
memory 3G
120 - 140 fps, 开始的时候曾经160，后面稳定在120-140，cpu占用在50%，windows下相当于25%
1 楼
fins
2010-12-21
另一个朋友的测试结果
32位WIN7， E2140,1.6G双核，CHROME 10.0.612.1，4G内存
大约在100~150
32位WIN7， E2140,1.6G双核，CHROME 10.0.612.1，4G内存
大约在100~150
发表评论
-
HTML5 与 ”性工能“障碍
2012-12-13 18:08 9384HTML5 与 ”性工能“障碍 最近看了@王淮Harr ... -
聊聊 iOS 5 和 iOS 6 在HTML5 canvas渲染上的差异
2012-09-13 18:40 5856我录制了一段iphone4s 下 ios 5 和 ios 6 ... -
尝试挑战 running panda ， HTML5的跑酷类游戏（开发中）
2011-08-01 00:02 5832我业余时间一直在尝试用HTML5 在ios平台上开发webga ... -
移动互联网 与 Web标准化技术
2011-07-14 19:54 3521移动互联网 与 Web标准化技术 ... -
为什么我喜欢safari 胜过chrome和ff？
2011-07-04 00:35 7696抛下IE不谈，目前在浏览器市场里 最受欢迎的莫过于chrome ... -
欢迎参加 "移动平台HTML5动画性能大赛"
2011-03-31 11:38 3666移动平台HTML5动画性能大赛 注 : 此页面为临时页面 待 ... -
为什么在今天,我要选择HTML5 (上) 【此文标题党，还是别看了】
2011-03-30 16:19 3893当初苹果禁止Flash登陆iOS设备时，曾经引起过一场“HTM ... -
HTML5游戏开发入门实例<脆弱的马里奥>
2011-03-14 20:10 10015HTML5游戏开发入门实例<脆弱的马里奥>: ht ... -
3月26号,北京,我将做一期HTML5游戏开发的技术讲座,欢迎参加.
2011-03-11 11:57 20713月26号,我将去北京做一次"html5游戏开发入门 ... -
w3ctech 2011 - 拥抱HTML5 技术大会即将召开,欢迎报名
2011-03-03 23:46 1598w3ctech 2011 - 拥抱HTML5 技术会议将于4月 ... -
[新增视频]我在<当HTML5来敲门>技术沙龙上做的一个关于HTML5游戏开发的分享
2011-02-27 11:03 1851我在2月26号的<当HTML5来敲门>技术沙龙上做 ... -
说说 iOS safari在retina屏下显示图像的原理
2011-02-24 17:05 8158我在 简析 HTML5 canvas在retina屏(视网膜屏 ... -
一个 HTML5 编写的 简谱播放程序
2011-02-17 15:14 3750一个 HTML5 编写的 简谱播放程序 : http:// ... -
试用了一下 HP touchPad ,有点小失望.
2011-02-16 12:57 2745我手里的这台机器是 工程样机. 从样机来看, 这台平板并不出色 ... -
简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化(更新原理)
2011-02-11 04:01 9527随着iphone4 的推出, retina ... -
[更新,bug修复了]chrome开启canvas 2D GPU加速后, clearRect的一个严重bug.
2011-01-24 15:54 9688最新版的 chromium. 已经修复了这个bug 经过进一 ... -
我也来重复造个轮子吧 ,发布一个利用原型,在Javascript中实现类机制的简单框架: GT-Class
2011-01-07 11:23 3411我也来重复造个轮子吧 ,发布一个利用prototype(原型, ... -
关于"GPU加速"的简单问答.
2011-01-05 22:34 2691如今使用GPU来代替CPU进 ... -
求助:用这样的方式写Kissy组件,可行吗?(Kissy推荐的方式是怎样的?)
2010-12-29 09:43 1985看了Kissy自带组件的代码,又看了你在D2上的PPT , 看 ... -
简单聊一聊百度的开源JS库:Tangram
2010-12-24 12:20 9446简单聊一聊百度的开源JS库:Tangram 最近百度开源了 ...
相关推荐
HTML5 Canvas爱心表白动画特效DEMO演示.html
1、html5 2、地球旋转 3、canvas
comic.js, 用于 HTML5 Canvas & Raphael.js & D3.js & SVG.js的卡通样式图 comic.jsJavascript库，用作 Raphael.js，D3.js， SVG.js 或者作为 HTML5 Canvas 插件的插件，提供动画样式绘制的功能。 请在 comic.js ...
http://www.jianshu.com/p/29beeabc832f?utm_campaign=maleskine&utm_content=note&utm_medium=writer_share
HTML5 Canvas炫酷3D背景动画代码.
html5 canvas左右翻转2d动画
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
html5 canvas球形网状烟花动画特效代码下载.zip
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML5 Canvas模拟衣服撕扯动画 超级逼真.rar.rar
HTML5 Canvas核心技术 图形、动画与游戏开发.pdf 原书电子版
小游戏webgl与canvas2d混合使用demo，将context2d作为纹理用webgl绘制
一个用html5模仿flash的动画广告demo,html5富媒体广告构思
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果，跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5 Canvas绘制2D背景
一个html5 canvas做的动画，效果是自动绘制一个网格
html5 canvas游动的水母动画特效是一款canvas绘制的海底水母动画背景效果，鼠标指针所到之处有灯光效果。
高清版 HTML5 CANVAS核心技术图形动画与游戏开发（爱飞翔）.pdf
HTML5 canvas纸片3D旋转动画代码，3D旋转代码，卷曲噪音动画。