Javascript 通过CSS与HTML5画布在网页上显示运动图像

我有一个图像，并将其在我的网页（JavaScript）上移动，如下所示：

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背景上

以下是（有关测试详细信息，请参见URL）：

图像精灵 浏览器画布CSS画布CSS ---------------------------------------------- Safari v5.0.3 59 95 59 89 Firefox v3.6.13 59 95 60 90 Firefox v4.0b8 75 89 78 82 铬合金v8.0 108 230 120 204 iPad，Horiz 17 44 2 14 iPad，Vert 4 75 2 15 如你所见：

将图像作为HTML元素移动总是比重新绘制画布的一部分效果更好，并且

如果你的速度只有5帧，那么你很可能做错了什么

---

编辑：添加了在背景上移动20个小动画精灵的测试。结论是一样的。

现在已经两年多了，我决定进行这些测试，看看这是否仍然成立。它有…也没有

Firefox桌面和移动都比canvas运行CSS动画的速度快得多

Chrome桌面运行的画布和CSS动画大致相同

ChromeMobile（在Nexus7上）正好相反：canvas的运行速度明显快于CSS

（在Linux上使用Firefox Android和Nexus 7以及桌面浏览器，分辨率为1920x1080）

浏览器/OS画布图像CSS图像画布精灵CSS精灵 ----------- ------------ ---------- -------------- ----------- Firefox 16 56.7fps 215.6fps 59.2fps 203.6fps Firefox 16 Android 17.1 fps 179.6 fps 11.5 fps 35.7 铬22 192.3fps 223.5fps 170.1fps 164.3fps Chrome Android 48.3fps 39.9fps 92.8fps 13.1fps

---

其他人都得到了什么？有人能测试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