Html 操作大量画布对象的最有效的库/框架/方法

我正在做一个大量使用HTML5画布的项目。画布可以有不同的高度/宽度，但为了便于讨论，假设它是512x512px。画布被分割成网格，每个单元格为8像素。这个网格总共有4096个潜在单元，网格可以更大，多达1024x1024像素

每个网格单元可以有自己的颜色，以及鼠标事件。我已经在三个不同的库中实现了基本功能。第一个是原始画布，第二个是，第三个是。当画布上的物品超过2000件时，这三家公司都开始与FPS问题作斗争

---

是否有任何库或工具可以专门帮助解决由大量对象/绘图引起的画布性能问题？是否有关于raw canvas的教程，或者使用与此主题相关的库？

如果您想在数千个单元格上获得良好的性能，我会选择raw canvas

库很好，但它们以性能为代价为您处理事件和绘图

设计提示1：

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

设计提示2：

不要试图让所有4096+电池都智能化，不要处理它们自己的事件。相反：

创建4096个以上的单元格对象

在画布上听[mousedown，mousemove，mouseup]，然后使用鼠标位置确定鼠标在哪个单元格上

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

设计提示3：

从图形中分离鼠标事件

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

使用独立的requestAnimationFrame循环来绘制由单元格相关事件生成的任何图形

---

您是否尝试过在easeljs中使用缓存功能

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

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

---

它的作用是将画布的矩形区域从startX、startY复制到startX+宽度、startY+高度到外部画布上，并且在每次重画期间，只将像素阵列复制回来。这大大提高了性能。您甚至可以对此应用变换。但是，如果更改容器的形状或内容，则必须更新缓存。因此，这对不变的内容最有效

我个人喜欢Pixi.js。它还有一个WebGL渲染器，如果设备支持它，它可以大大提高性能。我有自己的画布引擎，我用它来处理类似的事情，我测试它只是为了比较数字。在屏幕上画4096个相同颜色的方框，我可以在一台旧机器上得到19-22fps的镀铬效果。画了4096个不同颜色的盒子，让我的速度达到了12fps。如果你像缓存canvas markE的hint1一样，我很容易得到60fps，因为它实际上只绘制了一幅图像。如果你在改变的框上清除并重新绘制，你应该仍然在60帧/秒的范围内，因为我看不出你需要改变太多的框。同样，使用精灵表而不是单独的图像将更有效。如果正在使用向量，请缓存它们。EaselJS有一个SpriteSheetBuilder，可以从其他内容生成运行时spritesheet。