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