html - 大量的 HTML Canvas 还是一个大 Canvas ？

Question

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

我可以用一张大 Canvas 来做到这一点，然后在正确的位置绘制大量小部件。或者我可以有很多 <canvas>加入 <li>秒。对于这种事情， Canvas 是否足够轻？选择其中一个是否有令人信服的性能理由？

Answer 1

3 年前我不得不做类似的事情来表示 BPM .我用 <canvas> 实现了它(我在 canvas 和 VML 之上构建了一个 lib - for IE - )，然后我选择了你建议的第二个选项。

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

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