请建议：大画布上的小笔

Question

我目前正在 html5 画布（计划中的香草 JavaScript）上绘制一个折线图，宽度为 1px，并在我在 x 轴上绘制时移动，每个数据点间距为 2px。目前我的画布尺寸是 1000 像素 x 300 像素。

我的数据大部分时间都比我的画布大得多。我需要一些智能缩放方法的想法（或让它看起来像是在缩放），因为我希望能够缩放和拖动可视区域而不会失去 1px 线的清晰度。

注意：画布可能是猫的画，因为它很重要，为了一个明确的问题，如果它是一只猫，那么猫会比画布大得多，作为用户，你可能会有兴趣仔细观察它的脚并滚动或缩小以查看整只猫。 我看到的真正问题是它是一个 1px 粗细的线条图。

在绘图时更改（增加/减少）x 间距和 y 运动的幅度会更实用吗？这样，如果缩小得很远，我仍然会以 1px 的厚度进行绘制，并且仍然在相同大小的画布上绘制，但要移动更多的 fin-8 距离。这样，我认为每次导航该区域以及更改缩放时都必须重新绘制。此外，画布也不需要使用 css 进行缩放。

或者将画布的尺寸增加到更大的尺寸并在每次缩放时更改线条的粗细会更好吗？因此，当您缩小时，线条粗细会比放大时更大，但无论缩放级别如何，移动之间的距离和间距总是相同的。同样，我假设只有在使用 css 缩放画布元素以更改线宽时，我才需要重新绘制，而滚动绘图会很好，因为整个绘图将完全适合大画布。

我听说一开始在不同的浏览器上对大小和渲染有限制，我想知道是否有人有处理大型画布绘图的经验。

更多细节：我的数据点大约有 70,000 个，我将增加到 100,000 个数据点所以画布会很大，因此我担心（这是一个静态图表，所以不用担心这么大的任务让浏览器停滞不前）。

什么是最“可行”的方法，是否有更合乎逻辑的方法来完成这项任务？

请不要图书馆。

Answer 1

通过将画布 CSS 大小设置为远小于画布元素大小，您可以在缩放时保持清晰的细线。

例子：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");

// draw on standard canvas
ctx1.beginPath();
ctx1.moveTo(50/4,50/4);
ctx1.lineTo(250/4,250/4);
ctx1.stroke();

// draw on resolution enhanced canvas
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);
ctx.stroke();

#canvas{border:1px solid red; width:100px; height:100px;}
#canvas1{border:1px solid blue; width:100px; height:100px;}

<h4>Left: Standard canvas, Right: Resolution enhanced</h4>
<h4>Zoom your browser to notice the difference (eg 200%)</h4>
<canvas id="canvas1" width=100 height=100></canvas>
<canvas id="canvas" width=400 height=400></canvas>