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

标签 html canvas html5-animation

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

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

最佳答案

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

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

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

关于html - 大量的 HTML Canvas 还是一个大 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6423267/

相关文章:

javascript - 如何在 Node.js 中将图像发布到 Twitter

html - 将 <canvas> 帧转换为视频?

javascript - HTML5 Context/Canvas - 何时在上下文上调用绘制

javascript - 如何淡入html5 Canvas 中的元素

c# - 对于 Foundation/ZURB,随机 "data-section-content"是做什么用的?

html - 使用 docraptor : How to flow header logo on every page and fix footer on the first page of pdf. 打印 css 媒体

javascript - 将数组中的一项附加到一个 div

javascript - 如何在帖子限制内插入 HTML5 Canvas ?

html - 使用 WebGL 3D 形状作为 2D Canvas 图像

javascript - 为什么我的输入框的值没有被返回?