请指教：大画布上的小笔

Question

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

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

  

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

在绘制时改变（增加/减少）x间距和y移动的幅度是否更实际？因此，如果这样缩小，我将以1px的厚度绘制静止图像并仍在相同尺寸的画布上绘制但移动更多的翅片 - 八个距离。这样我就不得不重新绘制，我想每次我在该区域导航并改变缩放。此外，画布不需要使用css进行缩放。

或者将画布的大小增加到更大的画布并更改每个缩放的线条粗细会更好吗？因此，当您缩小时，线条粗细将比放大时更大，但无论缩放的级别如何，移动之间的距离和间距始终相同。另外这种方式我假设我只有在用css缩放canvas元素来改变线宽时才需要重新绘制，而滚动绘图会很好，因为整个绘图将全程适合大画布。

我听说一开始就在不同的浏览器上有大小和渲染的限制，我想知道如果有人在处理大型画布图方面有任何经验。

  

有关详细信息：我的数据点大约为70,000长我将增加到100,000个数据点所以画布会非常大，因此我关注（这是一张静态图表所以不用担心用这么大的任务拖延浏览器。）

什么是最可行的＆＃39;方式，是否有更合理的方法来完成这项任务？

请不要图书馆。

Answer 1

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

示例：

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;