画布线宽太粗[重复]

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.width = this.track.width;
canvas.height = 18;    

const c = canvas.getContext('2d');
c.beginPath();
c.moveTo(0, 0);
c.lineTo(canvas.width, 18);
c.lineWidth = 0.5;
c.stroke();

Answer 2

画布或多或少只是一个图像 -> 位图，您无法在该位图上为线条绘制半个像素。

不过，您可以使用 canvas.width 和 canvas.height 将画布大小加倍，然后使用 CSS 或 HTML 标记的宽度和高度属性将其缩小。

或者使用像 context.strokeStyle = 'rgba(r, g, b, 0.5)'; 这样的 alpha 值，使线条看起来只有一半粗细。

还要记住，绘图例程会在 2 个像素之间绘制线条，因此在每个 x 和 y 坐标上的非浮点值上添加 0.5 也会使线条看起来更小。

Answer 3

不透明度是画布如何创建比像素窄的线条外观，因为像素（根据定义）是画布使用的最小单位。

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

有 CSS 单元 px，它对应于 过去视频显示设备上可用的最小实际像素，通常在每英寸 72-96（每英寸 28-38厘米）。

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

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

const scaling = window.devicePixelRatio || 1;

假设这里的值为 2（因为它在我当前的笔记本电脑上）。如果您想创建一个占据 400 x 300 像素的画布，请创建一个 800x600 的画布。然后在画布上使用 CSS 样式 width: 400px; height: 300px。

现在您将能够创建锐利的半角线只要您要绘制的设备支持更高分辨率。

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

请注意！

当您的意思是半角时，您要么必须将 lineWidth 指定为 1，要么像这样使用画布缩放：

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()，则重置比例因子，而不是累积效果。