Question

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

我尝试过绘制较小的平铺画布，但由于绘图需要多次完成，因此效率很低。

我还尝试在内存中创建一个大画布，然后使用drawImage将其切片到较小的平铺画布上。这会失败，因为内存中的画布超出了最大画布大小（即使它尚未附加到DOM）。

我正在寻找有关如何在事先知道宽度/高度时如何在页面上绘制大型动态图表的建议。

谢谢！

Answer 1

您应该使用“虚拟解决方案”的概念，将问题分成两个更简单的问题：
- 我的画布大小是什么？ - 我的图表大小是多少？

然后您可以使用变换（比例）来确保您的图表适合您的画布第二个好处是，一旦拥有虚拟分辨率逻辑，实现缩放/平移将很简单。

只需几行代码即可澄清：

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似乎是well supported

您可能希望使用svg，因为您可以免费渲染，因此，滚动和缩放不应该是一个问题，而不是画布，您必须自己做几乎所有事情。

围绕HTML5画布大小限制有什么办法吗？

2 个答案: