有没有办法绕过 HTML5 canvas 大小限制？

Question

我需要在页面上绘制一个动态生成的图表，到目前为止一直在使用 canvas 元素。不幸的是，有些用户的图表太大，以至于 canvas 超出了移动浏览器的大小限制 - 结果是空的 canvas.

我曾尝试在较小的平铺 canvasses 上绘图，但这样做效率低下，因为绘图需要多次完成。

我也试过在内存中创建一个大的 canvas，然后使用 drawImage 将其分割成较小的平铺 canvasses。这失败了，因为内存中的 canvas 超过了最大 canvas 大小（即使它尚未附加到 DOM）。

我正在寻找有关如何在 width/height 事先不知道的情况下将大型动态图表绘制到页面上的任何建议。

谢谢！

Answer 1

您应该使用 'virtual resolution' 的概念，将问题分成两个更简单的问题：
- 我的 canvas 尺码是多少？
- 我的图表大小是多少？

然后您可以使用转换（缩放）来确保您的图表适合您的canvas。
第二个好处是，一旦您拥有虚拟解析逻辑，实施 zoom/panning 就会很简单。

只需几行代码即可阐明：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var diagramWidth = ... 
var diagramHeight = ...
var aspectRatio = Math.min( canvas.width/diagramWidth, canvas.height/diagramHeight);
context.scale(aspectRatio, aspectRatio);
// ... now you can draw in the diagram space.
// So to draw a point in the middle of the canvas write: 
context.fillRect(diagramWidth/2, diagramHeight/2, 1, 1);

Answer 2

访问SVG it seems to be well supported

您可能想改用 svg，因为您可以免费获得渲染，因此，滚动和缩放应该不是问题，而不是 canvas 您必须自己做几乎所有事情。

有没有办法绕过 HTML5 canvas 大小限制？

Is there any way around the HTML5 canvas size limitation?

html

javascript

canvas