CanvasRenderingContext2D: свойство lineJoin

Свойство CanvasRenderingContext2D.lineJoin API Canvas 2D определяет форму, используемую для соединения двух отрезков линии в точке их пересечения.

Это свойство не имеет эффекта, когда два соединённых отрезка имеют одинаковое направление, поскольку в этом случае область соединения не добавляется. Вырожденные отрезки с длиной ноль (т.е. с всеми конечными точками и контрольными точками в одной и той же позиции) также игнорируются.

Для этого свойства доступно три возможных значения: "round", "bevel", и "miter". Значение по умолчанию "miter".

"round"

Округляет углы фигуры, заполняя дополнительный сектор круга, центрированный в общей конечной точке соединённых отрезков. Радиус этих скругленных углов равен ширине линии.

"bevel"

Заполняет дополнительную треугольную область между общей конечной точкой соединённых отрезков и отдельными внешними прямоугольными углами каждого отрезка.

"miter"

Соединённые отрезки соединяются путём продолжения их внешних граней для соединения в одной точке, заполняя дополнительную область в форме ромба. Этот параметр зависит от свойства miterLimit. Значение по умолчанию.

В этом примере применяются скругленные соединения линии к пути.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();

Результат

В примере ниже рисуются три разных пути, демонстрирующие каждый из трёх lineJoin вариантов.

const ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 10;

["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
});

• В браузерах на основе WebKit и Blink, помимо этого свойства, реализован нестандартный и устаревший метод ctx.setLineJoin().

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D
• CanvasRenderingContext2D.lineCap
• CanvasRenderingContext2D.lineWidth
• Применение стилей и цветов