HTML Canvas - 如何画出很细的线条？
HTML Canvas - How to draw very thin lines?
我使用 JavaScript 库 P5.js 创建了一个项目，并使用其内置的 line() 和 ellipse() 函数在 canvas 上绘制直线和圆。我现在正试图从我的项目中删除整个 P5.js 及其函数以保留纯 JavaScript 但是当我用 JavaScripts ctx.LineTo 和替换 P5s 直线和椭圆函数时ctx.arc 我没有得到相同的结果。
使用 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();
这个问题 post 被标记为另一个问题的重复，但是 "duplicate" 问题没有解决我的问题，因为我说过我已经尝试添加 .5 来协调无效的值。
设备像素比
canvas 错误 resolution.Suspect 您使用的是 Retina 或高分辨率显示器。您需要将 canvas 像素大小与设备像素大小相匹配，目前您正在匹配 CSS 像素大小，对于视网膜显示器，每个 CSS 像素对应 4 个设备像素。使用 devicePixelRatio 全局 属性 找到 CSS 像素大小，然后将 canvas 分辨率 canvas.width = pixelWidth * devicePixelRatio 设置为与高度相同。
以下两个回答属于同一问题。
我使用 JavaScript 库 P5.js 创建了一个项目，并使用其内置的 line() 和 ellipse() 函数在 canvas 上绘制直线和圆。我现在正试图从我的项目中删除整个 P5.js 及其函数以保留纯 JavaScript 但是当我用 JavaScripts ctx.LineTo 和替换 P5s 直线和椭圆函数时ctx.arc 我没有得到相同的结果。
使用 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();
这个问题 post 被标记为另一个问题的重复，但是 "duplicate" 问题没有解决我的问题，因为我说过我已经尝试添加 .5 来协调无效的值。
设备像素比
canvas 错误 resolution.Suspect 您使用的是 Retina 或高分辨率显示器。您需要将 canvas 像素大小与设备像素大小相匹配，目前您正在匹配 CSS 像素大小，对于视网膜显示器，每个 CSS 像素对应 4 个设备像素。使用 devicePixelRatio 全局 属性 找到 CSS 像素大小，然后将 canvas 分辨率 canvas.width = pixelWidth * devicePixelRatio 设置为与高度相同。
以下两个回答属于同一问题。