Javascript 通过CSS与HTML5画布在网页上显示运动图像
我有一个图像,并将其在我的网页(JavaScript)上移动,如下所示:Javascript 通过CSS与HTML5画布在网页上显示运动图像,javascript,html,animation,canvas,css,Javascript,Html,Animation,Canvas,Css,我有一个图像,并将其在我的网页(JavaScript)上移动,如下所示: satelliteImage.style.top = coordinates.top + "px"; satelliteImage.style.left = coordinates.left + "px"; 不幸的是,除了Chrome,其他浏览器的性能都很差。瓶颈是渲染速度。我对IE没有希望,但至少我想改进Firefox。与样式更改相比,有人在移动图像时具有HTML5画布的性能吗?根据我对画布的体验,您应该能够在Fire
satelliteImage.style.top = coordinates.top + "px";
satelliteImage.style.left = coordinates.left + "px";
不幸的是,除了Chrome,其他浏览器的性能都很差。瓶颈是渲染速度。我对IE没有希望,但至少我想改进Firefox。与样式更改相比,有人在移动图像时具有HTML5画布的性能吗?根据我对画布的体验,您应该能够在Firefox上获得良好的50 fps,甚至在iOS上获得良好的15 fps。IE9可能是最快的浏览器,其他版本并没有真正实现画布。我创建了等效的测试来比较通过CSS移动图像和在HTML画布上绘制图像的帧速率。以下是测试:
- 在1024x768背景上
- 在1024x768背景上
编辑:添加了在背景上移动20个小动画精灵的测试。结论是一样的。现在已经两年多了,我决定进行这些测试,看看这是否仍然成立。它有…也没有
其他人都得到了什么?有人能测试IE9和IE10吗?我想用我在第三代iPad上的发现更新这个老问题: 画布以2:1的比例获胜,精灵动画平均每秒120帧,背景清除双向切换。CSS几乎不能达到60 fps
至于单张图片,CSS肯定更快。进一步了解MyNameIsKo在iPad3性能上的发现。我想知道这是否与CSS DOM方法必须担心在iPad3的视网膜屏幕上绘制有关,而画布将以较低的分辨率绘制,然后blt将绘制到屏幕上这一事实有关。iPad1的CSS更新速度明显快于iPad3 我还对画布javascript进行了一些更改,以便能够绘制视网膜分辨率的画布。我在canv.height=h之后添加了以下代码;在bg.onload函数中:
if (window.devicePixelRatio) {
ctx.canvas.style.width = w + "px";
ctx.canvas.style.height = h + "px";
ctx.canvas.height = h * window.devicePixelRatio;
ctx.canvas.width = w * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
这使得性能大大降低
iPad 1(iOS 5.5.1)
iPad3(iOS 6.1.3)
谢谢在画布上移动图像的最快方法是什么?@avok00在画布上移动图像的唯一方法是清除图像所在的矩形,然后使用
drawImage()
再次绘制图像。我强烈怀疑你的表现会比仅仅在DOM上移动一个图像差很多。嗯,那么50fps是什么呢?也许我可以用translate来移动整个画布并获得更好的性能?@avok00 Jakub的计算机不是你的。编写一个简单的测试来比较性能。这就是问题所在。我不能写一个简单的测试。我的网站很复杂,有很多层,阴影,css3,背景图片和很多透明度。所有这些都会影响性能。我几乎必须实现它才能进行测试:)否则我不会在这里问。顺便说一下,我的电脑很强大。FF仍然不擅长移动图像。不超过5帧,谢谢你的测试。可悲的是,我没有做错任何事。例如,当加载背景图像时,帧速率急剧下降。我甚至没有把图像移到它上面,而是移到背景上一个完全不同的图像上面。两者都是PNG,有很多透明度,文本有阴影,方框阴影,圆角等等。你在完美的环境下进行了测试。但它非常清楚地表明了这一点。再次感谢!我想到了一些我可能做错的事情。我使用负坐标将对象带出其父区域。我记得在执行此操作时,某些浏览器存在渲染问题。我走对了吗?我今天将对此进行测试。但这就是问题所在,如果你有一个复杂的页面,其中包含大量的视觉效果,画布的速度会因为其“画图即忘”的特性而降低很多,CSS需要记住所有的节点。这东西很复杂。我的经验特别是在游戏性能(大量动画图像)方面,canvas很容易胜过任何DHTML。@JakubHampl我添加了20个动画精灵(44x70)在1024x768静态背景图像上移动的测试。结果没有改变:让本机浏览器编写结果比自己用JavaScript编写要快。@Phrogz Fair。似乎我之前的评论是完全错误的:(如果@avok00可以
Browser/OS Canvas Image CSS IMage Canvas Sprites CSS Sprites
----------- ------------ ---------- -------------- -----------
Firefox 16 56.7fps 215.6 fps 59.2fps 203.6fps
Firefox 16 Android 17.1 fps 179.6fps 11.5fps 35.7
Chrome 22 192.3fps 223.5fps 170.1fps 164.3fps
Chrome Android 48.3fps 39.9fps 92.8fps 13.1fps
if (window.devicePixelRatio) {
ctx.canvas.style.width = w + "px";
ctx.canvas.style.height = h + "px";
ctx.canvas.height = h * window.devicePixelRatio;
ctx.canvas.width = w * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
CSS Sprite Canvas Sprites
-----------------------------------------------------
iPad 1 90 100
iPad 3 55 120
iPad 1(canvas changes) n/a 100
iPad 3(canvas changes) n/a 35