我正在使用两个html画布，fronendCanvas对用户可见，并且是html DOM树的一部分，并设置为具有100％的窗口宽度和高度，backendCanvas是在javascript代码上创建的，用于包含我需要绘制的巨大图表。
/** FrontendCanvas */
// HTML
<canvas id="canvas"></canvas>
// JavaScript
frontCanvas.width = window.innerWidth;
frontCanvas.height = window.innerHeight;
// CSS
#canvas {
display: block;
background-color: #dddddd;
}
/** BackendCanvas */
// JavaScript
backCanvas = document.createElement('canvas');
backCanvas.width = diagram.maxX;
backCanvas.height = diagram.maxY;
基本上，要使平滑的可视化效果，frontendCanvas仅使用drawImage函数显示在backendCanvas中绘制的巨大图像的一部分（用户可以使用鼠标在整个图形上拖动可视化区域，请参见带有背景图像的示例移动HTML5 Canvas的示例。）。
frontCanvas.getContext('2d').drawImage(
backCanvas,
(-ix - offsetX),
(-iy - offsetY),
(frontCanvas.width),
(frontCanvas.height),
0,
0,
(frontCanvas.width),
(frontCanvas.height)
);
当我将backendCanvas的宽度和高度设置为15000时，一切正常，但是当我将其设置为我实际需要的大小（宽度62322和高度50946）时，drawImage不再起作用并抛出大小错误：
IndexSizeError: Index or size is negative or greater than the allowed amount
(frontCanvas.height)
我的猜测是我达到了画布的最大尺寸，并且已将其重置，但是似乎并非如此，原因是：
画布参考资料说画布的宽度和高度限制是无符号的，因此比我提到的数字大得多；
我在调用drawImage函数之前检查了backendCanvas的大小，它是正确的。
任何帮助将不胜感激！
谢谢。
噢，这些尺寸（62322 x 50946）超出了画布可使用的范围-即使在2013年。：:-)
根据实现的不同，主要浏览器中当前支持的最大大小介于6-15000点之间（几个月前只有6-8000点）。它与大多数技术的实际需求以及硬件加速，内存等有关。
您要使用的图像的原始大小为11.83 GB（RGB + alpha作为画布仅使用RGBA）。另外，您必须将源图像存储在内存中的某个位置，然后才能将其绘制到画布上，这意味着您甚至在开始娱乐之前就已经占用了23 GB以上的内存。这将在大多数计算机上强制分页，这会使一切变得非常缓慢。
您需要在此处实现的是切片/缓存/缓冲技术（想想Google地图-这就是为什么他们平铺地图的原因）。
描述这个问题对于本问与答站点可能太宽泛了，因此我也建议您看一下PanJS3或Leaflet。免责声明：我不知道这些库，但是您至少可以研究它们，以了解它们如何处理大型图像/地图。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句