HTML5画布和线宽

Question

我在画布上绘制线条图。线条画得很好。缩放图形，绘制每个线段，颜色正常等等。我唯一的问题是在视觉上线宽变化。它几乎就像书法笔的笔尖。如果笔划向上，则线条很薄，如果笔划是水平的，则线条较粗。

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

Answer 1

<强> 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 2

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

---

编辑2015年7月17日：很棒的备忘单，但链接已经死了。据我所知，http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf有一份副本。

Answer 3

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

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

首先，DEAD结束时的思考：起初我认为这是上面的像素问题，但即使在强制所有段保持在一个恒定的水平之后问题仍然存在。

观察：我注意到我犯了一个新手的错误 - 我在For循环和单个“ctx.stroke”之前只使用了一个“ctx.beginPath（）”和“ctx.moveTo（posX，posY）” （）“在For循环之后，循环本身包裹了一个ctx.lineTo（）。

解决方案：一旦我将所有方法（.beginPath（）,. moveTo（）,. lineTo（）和.stroke（））一起移动到For循环中，这样它们就会在每次迭代时被击中，问题就消失了。我的连线具有所需的均匀厚度。

Answer 4

如果线宽是奇数，只需将0.5加到x或y。