Свойство 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();
}
Screenshot | Live sample |
---|---|
![]() |
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.lineCap' в этой спецификации. |
Живой стандарт |
Совместиммоссть с браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.
Особенности WebKit/Blink
- В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод
ctx.setLineCap()
.
Смотрите также
- Интерфейс, предоставляющий данное свойство
CanvasRenderingContext2D
CanvasRenderingContext2D.lineWidth
CanvasRenderingContext2D.lineJoin