HTML Canvas - 如何绘制非常细的线条？

Question

我使用 JavaScript 库 P5.js 创建了一个项目，并使用其内置的 line() 和 ellipse() 函数在画布上绘制线和圆。我现在正试图从我的项目中删除整个 P5.js 及其函数以保留纯 JavaScript 但是当我用 JavaScript ctx.LineTo 和 ctx.arc 替换 P5s 线和椭圆函数时，我没有得到相同的结果。

使用 P5.js 库创建的绘图看起来更加清晰和高分辨率。

下图是使用 P5.js 的 line() 和 ellipse() 函数创建的。

然而，这张图片是使用纯 JavaScript 创建的，你可以看到它看起来更糟糕。

使用纯 JavaScript，我已将线宽设置为最细，但它看起来仍然比 P5.js 版本更粗更模糊。

如何使用纯 JavaScript 绘制线条，与 P5.js 库所做的完全一样，以获得同样清晰、清晰的结果？

我目前使用的Javascript如下：

ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(60, 90);
ctx.strokeStyle = 'white';
ctx.lineWidth = 0.1;
ctx.stroke();

这个问题帖子被标记为另一个问题的重复，但是“重复”问题并没有解决我的问题，因为我已经尝试将 .5 添加到不起作用的坐标值上。强>

Answer 1

设备像素比率

画布的分辨率错误。怀疑您使用的是视网膜或高分辨率显示器。您需要将画布像素大小与设备像素大小相匹配，目前您正在匹配 CSS 像素大小，对于视网膜显示器，每个 CSS 像素对应 4 个设备像素。使用 devicePixelRatio 全局属性查找 CSS 像素大小，然后将画布分辨率 canvas.width = pixelWidth * devicePixelRatio 设置为相同的高度。

以下两个答案与同一个问题有关。

• https://stackoverflow.com/a/39951701/3877726
• https://stackoverflow.com/a/41776757/3877726