fins
- 浏览: 2611318 次
- 性别:
- 来自: 小胖儿的大城
-
文章分类
最新评论
-
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 9526HTML5 与 ”性工能“障碍 最近看了@王淮Harr ... -
聊聊 iOS 5 和 iOS 6 在HTML5 canvas渲染上的差异
2012-09-13 18:40 5950我录制了一段iphone4s 下 ios 5 和 ios 6 ... -
尝试挑战 running panda ， HTML5的跑酷类游戏（开发中）
2011-08-01 00:02 5989我业余时间一直在尝试用HTML5 在ios平台上开发webga ... -
移动互联网 与 Web标准化技术
2011-07-14 19:54 3657移动互联网 与 Web标准化技术 ... -
为什么我喜欢safari 胜过chrome和ff？
2011-07-04 00:35 7789抛下IE不谈，目前在浏览器市场里 最受欢迎的莫过于chrome ... -
欢迎参加 "移动平台HTML5动画性能大赛"
2011-03-31 11:38 3769移动平台HTML5动画性能大赛 注 : 此页面为临时页面 待 ... -
为什么在今天,我要选择HTML5 (上) 【此文标题党，还是别看了】
2011-03-30 16:19 4000当初苹果禁止Flash登陆iOS设备时，曾经引起过一场“HTM ... -
HTML5游戏开发入门实例<脆弱的马里奥>
2011-03-14 20:10 10129HTML5游戏开发入门实例<脆弱的马里奥>: ht ... -
3月26号,北京,我将做一期HTML5游戏开发的技术讲座,欢迎参加.
2011-03-11 11:57 21353月26号,我将去北京做一次"html5游戏开发入门 ... -
w3ctech 2011 - 拥抱HTML5 技术大会即将召开,欢迎报名
2011-03-03 23:46 1636w3ctech 2011 - 拥抱HTML5 技术会议将于4月 ... -
[新增视频]我在<当HTML5来敲门>技术沙龙上做的一个关于HTML5游戏开发的分享
2011-02-27 11:03 1917我在2月26号的<当HTML5来敲门>技术沙龙上做 ... -
说说 iOS safari在retina屏下显示图像的原理
2011-02-24 17:05 8213我在 简析 HTML5 canvas在retina屏(视网膜屏 ... -
一个 HTML5 编写的 简谱播放程序
2011-02-17 15:14 3834一个 HTML5 编写的 简谱播放程序 : http:// ... -
试用了一下 HP touchPad ,有点小失望.
2011-02-16 12:57 2802我手里的这台机器是 工程样机. 从样机来看, 这台平板并不出色 ... -
简析 HTML5 canvas在retina屏(视网膜屏幕,如iphone4)设备上的优化(更新原理)
2011-02-11 04:01 9575随着iphone4 的推出, retina ... -
[更新,bug修复了]chrome开启canvas 2D GPU加速后, clearRect的一个严重bug.
2011-01-24 15:54 9815最新版的 chromium. 已经修复了这个bug 经过进一 ... -
我也来重复造个轮子吧 ,发布一个利用原型,在Javascript中实现类机制的简单框架: GT-Class
2011-01-07 11:23 3449我也来重复造个轮子吧 ,发布一个利用prototype(原型, ... -
关于"GPU加速"的简单问答.
2011-01-05 22:34 2743如今使用GPU来代替CPU进 ... -
求助:用这样的方式写Kissy组件,可行吗?(Kissy推荐的方式是怎样的?)
2010-12-29 09:43 2032看了Kissy自带组件的代码,又看了你在D2上的PPT , 看 ... -
简单聊一聊百度的开源JS库:Tangram
2010-12-24 12:20 9502简单聊一聊百度的开源JS库:Tangram 最近百度开源了 ...
相关推荐
Laro 是一个基于html5 canvas的用于平面2d或者2.5d游戏制作的轻量级游戏引擎。 因为当前canvas作为画布形态的dom元素，并提供了大量关于矢量图以及texture绘制的api，但是由于其本身提供的api太过于底层，在类似游戏...
HTML5的Canvas元素是网页开发中的一个强大工具，它允许开发者在网页上绘制图形，创建动态视觉效果。在这个“汽车仪表盘canvas动画.zip”压缩包中，包含了一个使用纯JavaScript编写的汽车仪表盘插件，没有依赖jQuery...
Canvas是HTML5的一个核心特性，它提供了一个在网页上绘制2D图形的API。通过JavaScript，开发者可以控制Canvas元素，画线、填充形状、绘制图像等，实现了动态、实时的图形渲染。在这个拼图游戏中，Canvas被用来绘制...
Canvas是HTML5的一个重要特性，它是一个可编程的2D画布，允许开发者通过JavaScript进行像素级别的图像操作。在这个项目中，canvas可以用于创建更复杂的动画效果，如粒子系统、矢量图形动画或者实时图形渲染。通过...
Cocos2D-HTML5是一个基于HTML5规范的2D游戏引擎，由Cocos2D-X团队主导开发，旨在提供跨平台的游戏开发解决方案。它的主要特点是开源，采用MIT协议，允许开发者在多个平台上复用代码。Cocos2D-HTML5不仅支持PC浏览器...
在前端开发中，创建引人入胜且富有个性的用户界面是至关重要的，"基于canvas操作图像、视频实现弹性照片墙"就是一个很好的实践案例。这个项目利用HTML5的Canvas元素来动态展示和操作图片和视频，构建出一个具有弹性...
在前端开发中，实现一个点名demo涉及到的主要技术是JavaScript，一种广泛用于网页和网络应用的脚本语言。这个项目的核心目标是通过编程使小球在界面上移动，并且当小球与其他元素碰撞时，随机显示出一个人的名字。...
本示例"基于HTML5、Vue和WebKit的简单图像采集处理Demo"，主要展示了如何利用HTML5的新特性，结合Vue.js框架和WebKit浏览器引擎，实现一个图像采集和处理的前端应用。这个应用对于理解HTML5多媒体处理、前端图像处理...
HTML5是一种强大的网页开发技术，它为Web开发者提供了丰富的功能和接口，使得...对于学习和研究Web前端开发的人员来说，这是一个很好的学习案例，有助于提升对HTML5 Canvas、CSS3动画以及JavaScript交互处理的理解。
2. **Canvas元素**：HTML5的Canvas是一个基于矢量图形的画布，通过JavaScript可以绘制2D和3D图形。在这个3D翻页效果中，Canvas可能是实现动态翻页动画的关键。 3. **WebGL**：WebGL是HTML5的一个扩展，允许在浏览器...
在本压缩包“html5 黑洞效果js 黑洞资源特效.rar”中，我们聚焦于HTML5的Canvas元素，这是一个用于图形绘制的二维画布，允许通过JavaScript动态创建和修改图像。这个资源包包含了一个炫酷的宇宙黑洞引力特效，可以...
【HTML+JS实现贪吃蛇demo】是一个使用HTML和JavaScript技术构建的小型在线游戏，它重现了经典的“贪吃蛇”玩法。这个项目是初学者和有经验的开发者学习网页交互和JavaScript编程的一个好例子。下面我们将深入探讨...
jQuery 是一个高效、简洁、强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。其简洁的API使得JavaScript编程变得更加容易。 2. **选择图表库** 在这个Demo中，可能使用的是像`Chart.js`或`...
在这个纯JS的K线图demo中，开发者提供了一个可以直接运行并测试的实例，这对于学习和理解如何用JavaScript实现K线图功能非常有帮助。以下是对这个项目涉及的知识点的详细解释： 1. **K线图**：K线图，又称蜡烛图或...
1. **Canvas**: HTML5的Canvas元素是一个可编程的画布，通过JavaScript可以绘制2D图形，非常适合创建动态视觉效果和游戏。在手机场景应用中，Canvas可以用于制作图表、动画、小游戏等。 2. **SVG（Scalable Vector ...
在前端开发领域，Three.js 是一个非常流行的 JavaScript 库，用于创建和展示3D图形。在本主题中，我们将深入探讨如何使用 Three.js 的 CSS3DRenderer 来渲染全景图，这是一种将3D对象与CSS3变换相结合的技术，能够...
本文将介绍如何使用jQuery和HTML5的WebGL特性来创建一个高性能的烟花绽放动画。WebGL是一种基于OpenGL标准的JavaScript API，它允许在浏览器中进行3D图形渲染，而无需插件。 首先，我们需要了解HTML5的`<canvas>`...
9. **canvas绘图**：HTML5的canvas元素提供了一种在网页上绘制图形的方式，通过JavaScript可以创建复杂的2D动画和游戏特效。 10. **WebGL**：对于3D效果，WebGL提供了在浏览器中进行硬件加速的3D图形渲染。Three.js...