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

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

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

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

然后是实际的设备像素，现在通常变小一半或更小。

在具有高分辨率设备像素时，使用画布获得更清晰线条的技巧是缩放。使用它来确定您可以有效缩放的数量：

const scaling = window.devicePixelRatio || 1;

假设这里的值为2（与我当前的笔记本电脑一样）。如果要创建占用400px x 300px的画布，请创建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()而不重置效果，则重置比例因子。

Answer 2

尝试一下。

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 3

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

但是，您可以使用canvas.width和canvas.height将画布大小加倍，并使用CSS或HTML标签的width和height属性将其缩小。

或者使用context.strokeStyle = 'rgba(r, g, b, 0.5)';之类的Alpha值来表示该线的厚度为一半。

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

画布线宽太粗

3 个答案: