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

Question

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

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

盯紧了！

如何在不将两个三角形靠得更近的情况下解决这个问题？

Answer 1

它是某些浏览器的抗锯齿问题。例如，这个透视演示将在 Chrome 中绘制没有这样的白线，但在 Firefox 中会有丑陋的白线，因为这两个浏览器决定以不同的方式进行抗锯齿。

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

有一些骇人听闻的方法可以尝试解决您的问题。在这个非常具体的例子中，您可以在两个三角形之间画一条黑线。

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

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

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