Question

我有一个应用程序在画布上绘制超过260个绘图。将它们放在单个画布上的决定取决于速度考虑 - 它对于各种任务（例如缩放和平移）来说要快得多。即，在这种情况下，拆分为260幅画布不是一种选择。

在Opera，Firefox和IE上，一切都运行得很好。但是，当高度大于~8130像素（宽度恒定 - 834像素）时，Chrome会停止显示画布。

即。我有能力在飞行中添加/删除图表（它们相互堆叠），一旦高度超过8130 px，Chrome就会“隐藏”画布。它仍然保持响应，没有错误 - 可能是什么原因？

Answer 1

虽然标准为画布指定了无符号长尺寸：

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

大多数浏览器似乎将大小限制为8192（Safari显然是6826）。

无论如何（一般来说） -

如果你需要比我想象的更大的画布尺寸你绝对应该重新考虑设计。画布应该很少需要比屏幕上实际看到的更大。将画布视为您的数据的 view-port 而不是它的持有者。这就是大多数操作系统的工作原理（低级别），因为这已被证明是几十年来最好的方法。

考虑带宽要求（不完全准确，因为这是基于实现及其优化 - 但是为了指向我们正在处理的内容）：

使用RGBA缓冲区的8192 x 8192像素的画布大小消耗256 MB原始内存（并且取决于浏览器实现，它可能是双倍）。

更新@ 60Hz，带宽最小为15 GB /秒。此外，其他浏览器和系统内容也增加了这一点。如果在典型的消费者计算机上使用它（而不是在开发者机器上），则理论上的好处很容易丢失。

是的，你可以通过预渲染一个大区域来获得速度，并通过简单地将像素从那里移动到可见区域来移动到视口中 - 直到某一点和一定的成本（内存是一个因素）。无论如何，通过使用JavaScript来移动“blitting source”，与更低级别的环境相比，这种增益更为显着，从而失去了一些速度增益。

通常最好将数据保存为矢量格式（数组/类型数组/对象），并通过检查边界绘制可视部分，即。在视口中可以看到哪些数据。您可以通过各种方式优化数据以快速访问它（例如，参见quad-trees）。

渲染矢量数据并不像人们想象的那么昂贵（如果“正确”完成），画布越小，清除它并重绘数据的速度就越快。

然而，主要技巧是将画布上已有的内容（与来自大画布的blitting相同的效果）进行blit，并且仅更新新的间隙。

我的2美分..