很多HTML画布或一个大画布？

Question

我正在计划一个界面来显示许多小部件(在a上绘制<canvas>),这些部件可能会移动(例如,在使用jQuery以不同方式排序的列表中).小部件的数量可以是10到100之间的任何值.

我可以用一个大画布做到这一点,只需在正确的位置绘制许多小部件.或者我可以<canvas>在<li>s中有很多ses .帆布的重量是否足以满足这类需求？是否有令人信服的表现理由选择其中一个？

Answer 1

三年前，我代表BPM也曾做过类似的事情。我用<canvas>（我在画布和VML之上构建了一个lib - for IE - ）实现了它，并且我选择了你提出的第二个选项。

画布的问题在于，如果您有大量交互（单击特定元素、移动它等），那么每次您都必须重新绘制所有内容（对于充满元素的大画布，这并不是最好的选择）性能方面）。我更喜欢表示 X 占位符（每个占位符是一个包含画布的 div），并且我注意到性能更好，并且显然 DOM 事件（附加到画布的容器）更容易管理。

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