<canvas>和<div> s </div> </canvas>的效率

Question

我想问一下是否有人能给我一些我想做的设计决定的提示。

我的项目将包含一些精灵（一次在屏幕上预期10到30个），并且有几种方法可以实现它们。一种方法是CSS-Sprites，另一种方法是在画布上绘制它们。两者都不难。背景将是另一个<canvas>在后​​台绘制的平铺地图。

我已经看到Crafty将Sprites作为<div>中的<canvas>附加为CSS-Sprite。如果<div>在画布中，我不确定是否存在速度差异。有区别吗？

我希望用户通过鼠标点击，左，右等与精灵交互。精灵当然是在瓷砖地图的元素上站立或行走。那么为<canvas>编写处理程序并找到精灵，或者更确切地说使用<div>并让浏览器处理这个发现是否更有效？

我希望我可以传达我的问题。

Answer 1

我的测试表明纯粹的HTML + CSS对于精灵来说通常比​​Canvas更快：
Performance of moving image on web page via CSS vs HTML5 Canvas

在此处查看测试和结果（来自10个月前的浏览器）：
http://phrogz.net/tmp/image_move_speed.html

具体来说，我有两个测试几乎与您的问题完全相同：

• 20 animated sprites using CSS
• 20 animated sprites using Canvas

汇总FPS：

                  Image  Image  Sprite  Sprite
        Browser  Canvas    CSS  Canvas     CSS
----------------------------------------------
  Safari v5.0.3      59     95      59      89
Firefox v3.6.13      59     95      60      90
 Firefox v4.0b8      75     89      78      82
    Chrome v8.0     108    230     120     204
    iPad, Horiz      17     44       2      14
     iPad, Vert       4     75       2      15

更新的浏览器通常要快得多（Chrome几乎总是在同一台机器上达到250fps的内部上限）并且更多地缩小差距，但使用Canvas仍然更慢并且工作量更大。

Answer 2

Canvas具有更好的性能。

经过优化可以做到这种行为。

Answer 3

Canvas会更快，但在如此低的对象数下，太多并不重要。你应该选择Canvas，因为如果你计划将它扩展为更复杂，更精致，或者你想要特效（如粒子），或者有更多的物体，画布将成为必需品。

如果要像游戏一样运行，请使用Canvas。但是如果它将像地图应用程序一样运行，SVG不是一个糟糕的选择，因为一些事件工作已经为你完成了。我猜这个项目更接近游戏。

我已经对这样的问题给出了更长时间的回复，例如：HTML5 Canvas vs. SVG vs. div

  

背景将是另一个在背景中绘制的平铺地图

为了性能，只需将画布'css background-image设置为此贴图！ （假设它没有改变）