CanvasRenderingContext2D.lineCap

Свойство CanvasRenderingContext2D.lineCap предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. Свойство может принимать 3 значения: butt, round и square. По умолчанию установленно butt.

См. также главу Applying styles and color в Canvas Tutorial.

Синтаксис

ctx.lineCap = "butt" || "round" || "square";

Значения

butt

Концы линий прямые.

round

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

square

Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.

Примеры

Использование свойства lineCap

Ниже представлен простой фрагмент кода, использующий lineCap.

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

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

Левая линия будет использовать значение lineCap butt. Она не будет выходить за направляющие. Средняя линия будет нарисована со занчением lineCap round. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение square. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

<canvas id="canvas" width="150" height="150"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lineCap = ['butt', 'round', 'square'];

// 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';
for (let i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
}

Screenshot	Live sample

Спецификации

Совместиммоссть с браузерами

Особенности WebKit/Blink

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

Смотрите также

• Интерфейс, предоставляющий данное свойство CanvasRenderingContext2D
• CanvasRenderingContext2D.lineWidth
• CanvasRenderingContext2D.lineJoin