HTML5画布和线宽

我在画布上绘制线图。线条很好。图形被缩放，每个段被绘制，颜色都可以等等。我唯一的问题是视觉上线宽变化。这几乎就像一把笔笔的笔尖。如果行程向上，线条很薄，如果行程是水平的，则线条较粗。

我的行厚度是不变的，我的strokeStyle设置为黑色。我没有看到画布的任何其他属性影响这样一个变化的行宽，但必须有。

解决方法

Live Demo

我的现场演示基本上只是重新创建了MDN所说的内容。对于均匀的笔迹宽度，您可以使用整数进行坐标，对于要使用的奇数笔迹宽度，可以使用.5来获得正确填充像素的细线。

从MDN Article

If you consider a path from (3,1) to (3,5) with a line thickness of
1.0,you end up with the situation in the second image. The actual
area to be filled (dark blue) only extends halfway into the pixels on
either side of the path. An approximation of this has to be rendered,
which means that those pixels being only partially shaded,and results
in the entire area (the light blue and dark blue) being filled in with
a color only half as dark as the actual stroke color. This is what
happens with the 1.0 width line in the prevIoUs example code.

To fix this,you have to be very precise in your path creation. KNowing that a 1.0 width line will extend half a unit to either side of the path,creating the path from (3.5,1) to (3.5,5) results in the situation in the third image — the 1.0 line width ends up completely and precisely filling a single pixel vertical line.