CanvasRenderingContext2D.lineCap

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

Примечание: Линии могут быть нарисованы с помощью методов stroke()strokeRect(), и strokeText() methods.

Синтаксис

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". Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.

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();
}
ScreenshotLive sample

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.lineCap' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
lineCapChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

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

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: ekirpichyov, boxa6, mdnwebdocs-bot, Thud97
Обновлялась последний раз: ekirpichyov,