在画布上画两个三角形的正方形，三角形后面有空白
我在画布上绘制一个由两个三角形组成的正方形时遇到这个问题。 三角形的两个填充之间有一个空格：
http://cl. ly/71AB/Schemafbeelding_2011-05-24_om_16.52.53.png
仔细观察！
如何解决这个问题而不将两个三角形靠得更近？
I have this problem while drawing a square in canvas, made out of two triangles.
There is a whitespace between the two fills of the triangles:
http://cl.ly/71AB/Schermafbeelding_2011-05-24_om_16.52.53.png
Watch closely!
How do I solve this without placing the two triangles closer together?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是某些浏览器的抗锯齿问题。例如这个透视演示在Chrome中绘制时不会出现这样的白线，但会出现难看的白色Firefox 中的行，因为这两个浏览器决定以不同的方式进行抗锯齿处理。
因此，有些东西在 Chrome 中看起来不错，而在 FireFox 中则不然，反之亦然。
有一些黑客方法可以尝试解决您的问题。在这个非常具体的实例中，您可以在两个三角形之间画一条黑线。
编辑：对于半 alpha 形状，您必须更改绘制线的 globalCompositeOperation。这是一个示例：jsfiddle.net/rqd8f
模糊算法会有所帮助，但画布上的每像素操作速度很慢。
如果您使用剪切区域，请展开它们。
Its an anti-aliasing issue with some browsers. For instance this persepctive demo will draw without such white lines in Chrome but will have the ugly white lines in Firefox, because the two browsers decided to do anti-aliasing differently.
Because of this, some things look nice in Chrome and not FireFox, and vice versa.
There are a few hackish ways to attempt to solve your problem. In this very specific instance, you could draw a black line between the two triangles.
edit: For semi-alpha'd shapes, you will have to change the globalCompositeOperation of the drawn line. Here is an example: jsfiddle.net/rqd8f
A blurring algorithm would help, but per-pixel operations on canvas are slow.
If you are using clipping regions, expand them.