一大堆HTML画布还是一个大画布？

Question

我正在计划一个界面来显示许多小部件(绘制在<canvas>上)，它们可以到处移动(例如，在一个使用jQuery以不同方式排序的列表中)。小部件的数量可以在10到100之间。

我可以用一块大画布完成这项工作，只需在正确的位置绘制许多小部件即可。或者我可以在<li>s中有很多<canvas>s。对于这种事情，画布足够轻吗？是否有令人信服的性能原因选择其中之一？

Answer 1

3年前，为了代表BPM，我不得不做一些类似的事情。我用<canvas>实现了它(我在canvas和VML之上为IE构建了一个库)，我选择了你提出的第二个选项。

canvas的问题是，如果你有很多交互(点击一个特定的元素，移动它等)，那么每次你都必须重新绘制所有东西(对于一个充满元素的大画布来说，就性能而言并不是最好的)。我更喜欢表示X占位符(每个占位符是一个包含画布的div )，我注意到性能更好，显然DOM事件(附加到画布的容器)更容易管理。

实现这种交互式内容的另一种方法是使用SVG (现在，我更喜欢这样做)，例如通过raphaelJS。对于没有交互的动画和2d表示，我会使用<canvas>。

Answer 2

我听说对于高度大于600px的画布，性能会下降。所以你可能想要解决这个问题。正在查找参考资料...