Question

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

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

devicePixelRatio

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

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

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

1 个答案:

devicePixelRatio