CanvasRenderingContext2D.lineCap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Синтаксис

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

Параметры

butt

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

round

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

square

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

Примеры

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

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

HTML

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

JavaScript

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

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

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

Specification
HTML
# dom-context-2d-linecap-dev

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

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