在畫布上繪製兩個三角形的正方形，三角形後面有空白

Question

我在繪製畫布中的正方形時出現此問題，由兩個三角形組成。 有三角形的兩個填充之間的空白：

http://cl.ly/71AB/Schermafbeelding_2011-05-24_om_16.52.53.png

關注密切！

如何在不將兩個三角形放在一起的情況下解決這個問題？

Answer 1

它是一些瀏覽器的反鋸齒問題。例如，this persepctive demo在Chrome中將沒有這樣的白線，但在Firefox中會出現難看的白線，因爲兩個瀏覽器決定以不同的方式進行消除鋸齒。

正因爲如此，有些東西在Chrome中看起來不錯，而不是FireFox，反之亦然。

有幾種方法可以嘗試解決您的問題。在這個非常具體的例子中，你可以在兩個三角形之間畫一條黑線。

編輯：對於半alpha'd形狀，您將不得不更改繪製線的globalCompositeOperation。以下是一個示例：jsfiddle.net/rqd8f

模糊算法將有所幫助，但畫布上的每像素操作速度較慢。

如果您正在使用剪裁區域，請展開它們。