用于处理大量画布对象的最有效的库/框架/方法

Question

我正在开发一个大量使用HTML5 Canvas的项目。画布可以有不同的高度/宽度，但为了争论，让我们说它是512x512px。画布分为网格，每个单元格为8个像素。这个网格总共有4096个潜在单元格（网格可以更大，大到1024x1024像素）。

每个网格单元都可以拥有自己的颜色以及鼠标事件。我已经在三个不同的库中实现了基本功能。第一个是原始画布，第二个是KineticJS，第三个是EaselJS。一旦画布上有大约2000个项目，这三个人就开始对FPS问题感到困惑。

是否有任何库或工具可以帮助专门解决由大量对象/绘制引起的画布性能问题？是否有任何涉及此主题的教程（用于原始画布或使用库）？

Answer 1

如果你想要成千上万的细胞表现出色，我会选择原始画布。

图书馆很棒但他们处理事件＆amp;以性能为代价为您画画。

设计提示＃1：

如果相对较少数量的细胞受到事件的影响，只需更新＆amp;重绘受影响的单元格而不是清除画布并重新绘制每个单元格。

设计提示＃2：

不要试图使所有4096+细胞成为“聪明的”＃34; （没有处理他们自己的事件）。代替：

• 创建4096个单元格对象。

• 在画布上侦听[mousedown，mousemove，mouseup]，然后使用鼠标位置确定鼠标所在的单元格。

• 对相应的单元格属性进行任何所需的更改。

设计提示＃3：

将鼠标事件与图形分开。

• 事件：将所需的单元格相关事件保存在数组中，而不是尝试更改事件处理程序中的单元格属性。

• 使用独立的requestAnimationFrame循环来完成与细胞相关事件产生的任何绘图。

Answer 2

您是否尝试过使用＆＃34;缓存＆＃34;在easeljs中的功能？http://createjs.com/demos/easeljs/Cache.html

如果您在EaselJS中绘制形状或使用容器对象，只需添加

即可

shape.cache(startX, startY, width, height);

这样做是将画布的矩形区域（startX，startY）复制到（startX + width，startY + height）到外部画布上，并且在每次重绘时，只需将像素阵列复制回来。这大大提高了性能。您甚至可以对此应用变换。但是，如果更改容器的形状或内容，则必须更新缓存。因此，这最适合不变的内容。