我使用 JavaScript 库 P5.js 创建了一个项目，并使用其内置的 line() 和 ellipse() 函数在 Canvas 上绘制直线和圆。我现在尝试从我的项目中删除整个 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 添加到不起作用的坐标值中。
最佳答案
devicePixelRatio
Canvas 的分辨率错误。怀疑您使用的是视网膜或高分辨率显示器。您需要将 Canvas 像素大小与设备像素大小相匹配，当前您正在匹配 CSS 像素大小，对于视网膜显示，每个 CSS 像素为 4 个设备像素。使用 devicePixelRatio 全局属性查找 CSS 像素大小，然后将 Canvas 分辨率设置为相同的高度。
以下两个答案涉及同一问题。
关于javascript - HTML Canvas - 如何绘制非常细的线条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45114144/