javascript - Canvas 线宽太粗

Question

我正在尝试canvas而且我无法让线条变得更细。

我正在使用lineWidth as .5但还是太大胆了。

const c = canvas.getContext('2d');

canvas.width = this.track.width();
canvas.height = 18;

c.beginPath()
c.moveTo(where, 20)
c.lineTo(where, 20)
c.lineTo(where, 0)

// If i go .4 the line starts having opacity
c.lineWidth = .5;
c.stroke()

没有解决办法吗？

这就是我的网格的样子

my grid

Answer 1

不透明度是 Canvas 创建比像素更窄的线条外观的方式，因为像素(根据定义)是 Canvas 使用的最小单位。

但这并不意味着所有希望都破灭了，因为这只是一个问题，具体取决于您所说的“像素”的含义。

CSS 单位 px，它对应于曾经视频显示设备上可用的最小实际像素，通常在每英寸 72-96 的范围内(每厘米 28-38)。

还有实际的设备像素，现在通常只有一半或更小。

当您拥有高分辨率设备像素时，使用 Canvas 获得更清晰线条的技巧是缩放。用它来计算您可以有效扩展多少:

常量缩放 = window.devicePixelRatio || 1;

假设此处的值为 2(因为它在我当前的笔记本电脑上)。如果您想要创建一个占据 400 像素 x 300 像素的 Canvas ，请创建一个 800x600 的 Canvas 。然后使用 CSS 样式 width: 400px; Canvas 上的高度:300px。

现在，只要您绘制的设备支持更高分辨率，您就可以创建锐利的半宽线条。

我在 Angular 应用程序的很多地方都使用了这个技巧:https://skyviewcafe.com/ 。如果您想深入研究源代码以查找高分辨率 Canvas 绘图的示例，这里有一个指向源代码的链接。

请注意!

当您指的是半 Angular 时，您必须将 lineWidth 指定为 1，或者使用 Canvas 缩放，如下所示:

const context = this.canvas.getContext('2d');
context.scale(scaling, scaling);

小心使用context.scale()——它的影响是累积的。如果您在同一上下文中连续执行 context.scale(2, 2) 两次，您的缩放因子将为 4，而不是 2。

context.setTransform(1, 0, 0, 1, 0, 0);

...如果您想多次调用 context.scale()，则重置缩放因子，且效果不会累积。