Javascript 画布线条宽度太粗

我正在试用

canvas

，但我无法让线条变细

我使用的是

线宽为.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()

没有解决办法吗

这就是我的网格的样子

试试这个

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();

试试这个

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();

---

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

但是，您可以使用

canvas.width

和

canvas.height

将画布大小加倍，并使用CSS或HTML标记width和height属性将其缩小

或者使用alpha值，如

context.strokeStyle='rgba（r，g，b，0.5）'显示线条的厚度为一半

还请记住，绘图例程在2个像素之间绘制线条，因此在每个x和y坐标上为非浮点值添加0.5也会使线条看起来更小。
画布或多或少只是一个图像->位图，不能在该位图上为线条绘制半个像素

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

或者使用alpha值，如
context.strokeStyle='rgba（r，g，b，0.5）'显示线条的厚度为一半

还请记住，绘图例程在2个像素之间绘制线条，因此在每个x和y坐标上向非浮点值添加0.5也会使线条看起来更小。
不透明度是画布创建比像素窄的线条外观的方式，因为像素是（根据定义）画布使用的最小单位

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

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

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

在拥有高分辨率设备像素时，使用画布获得更清晰线条的诀窍是缩放。使用此项计算您可以有效扩展的范围：

const scaling=window.devicePixelRatio | | 1

假设此处的值为2（与我当前笔记本电脑上的值相同）。如果您想创建一个占据（比如）400px x 300px的画布，请创建一个800x600画布。然后使用CSS样式
width:400px；高度：300px
在画布上

现在，只要所绘制的设备支持更高的分辨率，您就可以创建清晰的半宽线

我在Angular应用程序的很多地方都使用了这个技巧。如果您想通过源代码查找高分辨率画布绘制的示例，那么这里有一个指向源代码的链接

请注意

当您表示半宽时，您必须指定
线宽为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（）
，而不累积效果，则重置缩放因子。
不透明度是画布创建比像素窄的线条外观的方式，因为像素（根据定义）是画布使用的最小单位

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

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

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

在拥有高分辨率设备像素时，使用画布获得更清晰线条的诀窍是缩放。使用此项计算您可以有效扩展的范围：

const scaling=window.devicePixelRatio | | 1

假设此处的值为2（与我当前笔记本电脑上的值相同）。如果您想创建一个占据（比如）400px x 300px的画布，请创建一个800x600画布。然后使用CSS样式
width:400px；高度：300px
在画布上

现在，只要所绘制的设备支持更高的分辨率，您就可以创建清晰的半宽线

我在Angular应用程序的很多地方都使用了这个技巧。如果您想通过源代码查找高分辨率画布绘制的示例，那么这里有一个指向源代码的链接

请注意

当您表示半宽时，您必须指定
线宽为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（）
，而不累积效果，则重置缩放因子。
图像不工作（禁止）。像素不能小于1像素。正在进行其他操作，请使用JSFIDDLE更新您的问题将颜色更改为透明。这将显示为变薄您的图像不工作（禁止）。您的像素不能小于1像素。正在进行其他操作，请使用JSFIDDLE更新您的问题将颜色更改为透明。这样看起来会更薄。这确实让我看起来更薄了，但它仍然有点大胆，即使在理解画布上的线条画时有一些额外的帮助：。总有一天会发生这样的事情