HTML / CSS / JS 画线

Question

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

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

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

我的两个问题是：

1. 在不降低浏览器速度的情况下绘制这么多线条的最有效方法是什么？

2. 有没有办法使生成的图像/画布可缩放，以便用户可以放大这条线的特定部分并四处导航？

我目前正在使用一些类似这样的测试代码，但是有没有更有效的方法来做到这一点：

<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 的画布：jsfiddle.net/dqkksbz6/2），发现我的猜测是错误的。正如 MarkE 所指出的，大量的 DOM 节点确实对浏览器性能有重大影响。 SVG 实际上更慢。使用画布要快得多，并且不会像巨大的 SVG 那样破坏浏览器。

不过，我最初的观点仍然是在请求之前生成图像。 MarkE 的评论非常有帮助，也许其中有一些东西。您可以生成一个 PNG，然后在达到某个缩放级别后切换到相关区域的一个小 SVG。这将是一项相当多的工作，但我想不出更好的方法来优化速度和质量。