Рисуем квадрат из двух треугольников на холсте, за треугольниками есть пробел

Question

У меня есть эта проблема при рисовании квадрата на холсте, состоящего из двух треугольников. Между двумя заливками треугольников есть пробел:

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

Смотри внимательно!

Как мне решить эту проблему, не помещая два треугольника ближе друг к другу?

Answer 1

Это проблема сглаживания в некоторых браузерах.Например, эта перцептивная демонстрация будет рисовать без таких белых линий в Chrome, но будет иметь ужасные белые линии в Firefox, потому что два браузера решили по-разному выполнять сглаживание.

Из-за этогонекоторые вещи выглядят хорошо в Chrome, а не в FireFox, и наоборот.

Есть несколько хакерских способов решить вашу проблему.В этом очень конкретном случае вы могли бы нарисовать черную линию между двумя треугольниками.

edit: Для форм с полу-альфа вам нужно будет изменить globalCompositeOperation нарисованной линии.Вот пример: jsfiddle.net/rqd8f

Алгоритм размытия может помочь, но операции с пикселями на холсте выполняются медленно.

Если вы используете области отсечения, разверните их.