HTML5画布和线条宽度

Question

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

我的线条粗细不变，我的strokeStyle设置为black。我没有看到画布的任何其他属性会影响这种不同的线宽，但必须有。

Answer 1

尝试lineCap = "round"和lineJoin = "round"。请参见this PDF中的“线型”，了解这些参数的用途。

---

编辑17月 - 2015年：大小抄，但链接已经死了。据我所知，有一个在http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf它的副本。

Answer 2

Live Demo

我的现场演示，基本上只是再现了MDN说什么。对于均匀笔画宽度，您可以使用整数作为坐标，对于想要使用.5的奇数笔画宽度，可以使用清晰的线条来正确填充像素。

从MDN Article

如果考虑从（3,1）至（3,5）的路径与 1.0的线的粗细，就结束了在这种情况第二个图像。实际要填充的区域（深蓝色）仅延伸到路径两侧的 上的像素的一半。这个近似值必须被渲染，这意味着这些像素仅被部分着色，并且在整个区域（浅蓝色和深蓝色）中的结果 被填充为 ，颜色只有实际行程的一半黑色颜色。这是 与前面的示例代码中的1.0宽度行发生的情况。

要解决这个问题，您必须在创建路径时非常精确。 已知1.0宽度线将半个单元延伸到路径的任一侧 ，创建从（3.5,1）到（3.5,5）的路径会导致第三个图像中的 情况 - 1.0线宽结束完全打开 并精确填充单个像素垂直线。

Answer 3

我刚解决了一个类似性质的问题。它涉及For循环中的一个错误。

问题：我创建了一个for循环来创建一系列连接的线段，并注意到线条很粗，但最后一段显着减少（没有明确使用渐变）。

第一，最后的想法：起初我认为这是上述像素问题，但问题仍然存在，即使强制所有的段保持恒定的水平。

观察：我注意到我犯了一个新手的错误 - 我只用了一个“ctx.beginPath（）”和“ctx.moveTo（posX，posY）”前的For循环和一个单独的“ctx。（），.lineTo（），.moveTo（），.lineTo（）和.stroke（）之后移动所有方法（.beginPath （））一起进入For循环，这样它们在每次迭代时都会被击中，问题就消失了。我的连接线具有所需的均匀厚度。

Answer 4

如果linewidth是奇数，只需将0.5添加到x或y