CanvasRenderingContext2D: свойство lineCap

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

Одно из следующих:

"butt"

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

"round"

Конечные точки линий скруглены.

"square"

Конечные точки линий обрезаются до прямоугольника, ширина которого равна ширине линии, а высота — половине ширины линии.

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

HTML

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

JavaScript

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();

Результат

В этом примере нарисованы три линии, каждая с разным значением свойства lineCap. Добавлено два направляющих, чтобы увидеть точные различия между тремя. Каждая из этих линий начинается и заканчивается ровно на этих направляющих.

Линия слева использует значение по умолчанию "butt". Она нарисована полностью вровень с направляющими. Вторая линия использует значение "round". Это добавляет полукруг к концу, радиус которого равен половине ширины линии. Линия справа использует значение "square". Это добавляет прямоугольник, ширина которого равна ширине линии, а высота — половине ширины линии.

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

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
});

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

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