在画布中绘制两个三角形的正方形，三角形后面有空白

Question

我在画布中绘制一个由两个三角形组成的正方形时遇到此问题。 三角形的两个填充之间有一个空格：

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

仔细观察！

如何在不将两个三角形放在一起的情况下解决这个问题？

Answer 1

某些浏览器出现了反锯齿问题。例如this persepctive demo将在Chrome中没有这样的白线但在Firefox中会出现丑陋的白线，因为两个浏览器决定采用不同的方式进行抗锯齿。

因此，有些东西在Chrome中看起来不错，而不是FireFox，反之亦然。

尝试解决问题的方法有几种。在这个非常具体的例子中，您可以在两个三角形之间绘制一条黑线。

编辑：对于半字形的形状，您必须更改绘制线的globalCompositeOperation。这是一个例子：jsfiddle.net/rqd8f

模糊算法会有所帮助，但画布上的每像素操作都很慢。

如果您正在使用剪裁区域，请展开它们。