Question

我正在尝试找到在页面上绘制数千行的最有效方法。

我有一个数据库，其中包含我想绘制的每一个点，我可以将它们拉成一个坐标的python列表，如下所示：[[0,0]，[200,100]，[400,250]]。该清单包括约2000个点。而且我想将这些点连接起来，形成一条大线的线段。每个部分可能需要是不同的颜色

在每一页上，我想画出2-3条这样的大线（每页大约有2000-6000点）

我的两个问题是：

在不降低浏览器速度的情况下绘制这么多行的最有效方法是什么？
有没有办法让生成的图像/画布可缩放，以便用户可以放大这一行的特定部分并导航？

我目前正在使用这样的测试代码，但有更有效的方法可以做到这一点：

<canvas id="myCanvas" width="400" height="400"
style="border:1px solid #ffffff;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(400,250);
ctx.strokeStyle = '#6b44cc';
ctx.stroke();
ctx.closePath();

</script>

Answer 1

将这些点编译为SVG文件似乎是最有效的选择。如果我正确理解您的问题，您已经拥有了一个您想要绘制的点数据库。这意味着无需动态生成此图像。

我猜测预编译的SVG图像加载速度比画布上绘制的线条要快得多。 Canvas可以更快地生成图像，但如果您可以预先生成图像，这将为您节省大量浏览器的时间。 SVG也可以缩放，所以我认为这最适合您的标准。

以下是您可以用于zoom and pan your SVG

的库的示例

修改

我创建了一个包含100000行的大型SVG图像（类似于dwana＆＃39; s canvas one here：jsfiddle.net/dqkksbz6/2）并发现我的猜测是错误的。正如MarkE指出的那样，大量的DOM节点确实对浏览器性能产生了重大影响。 SVG实际上更慢。使用画布要快得多，并且不会像庞大的SVG那样破坏浏览器。

尽管如此，我的原始观点仍然是在它被请求之前生成图像。 MarkE的评论非常有帮助，也许还有其中的一些内容。您可以生成一个PNG，然后在达到某个缩放级别后切换到相关区域的小SVG。这可能需要做很多工作，但我无法想出一种更好的方法来优化速度和质量。

HTML / CSS / JS线条图

1 个答案: