Как избавиться от заштрихованных краев на мазках HTML5 Canvas?

Question

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

Вот пример кода, который я использую:

this.context.lineJoin = "round";
this.context.lineTo(x1, y1);
this.context.lineTo(x2, y2);
this.context.closePath();
this.context.stroke();

Мне было интересно, было лиспособ создания линий без слегка заштрихованных краев.

Answer 1

Canvas использует субпиксельную точность.

Добавьте 0,5 к своим координатам.0.0 - это граница между пикселями, поэтому линия попадает на два пикселя данных изображения.

Answer 2

При рисовании линий холст автоматически сглаживает их, что вы и называете заштрихованными краями.

Чтобы избежать сглаживания, вам нужно будет рисовать линии вручную, используя putImageData напрямую.(см. MDN для манипуляции с пикселями холста )

Подходящим алгоритмом для этого является Алгоритм линии Брезенхама , который довольно легко реализовать для JS / canvas.