Свойство CanvasRenderingContext2D
.lineJoin
предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.
См. также главу Applying styles and color в Canvas Tutorial.
Note: Lines can be drawn with the stroke()
, strokeRect()
, and strokeText()
methods.
Синтаксис
ctx.lineJoin = "bevel" || "round" || "miter";
Значения
Свойство может принимать три значения: round
, bevel
и miter
. По умолчанию установленно значение miter
. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.
round
- Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.
bevel
- "Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.
miter
- Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством
miterLimit
.
Примеры
Использование свойства lineJoin
Ниже представлен простой фрагмент кода, использующий lineJoin
для скругления места соединения линий.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 20;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();
Result
Разница между значениями lineJoin
Пример ниже наглядно демонстрирует разницу между значениями свойства lineJoin.
var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
ctx.lineWidth = 10;
for (let i = 0; i < lineJoin.length; i++) {
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5, 5 + i * 40);
ctx.lineTo(35, 45 + i * 40);
ctx.lineTo(75, 5 + i * 40);
ctx.lineTo(115, 45 + i * 40);
ctx.lineTo(155, 5 + i * 40);
ctx.stroke();
}
Screenshot | Live sample |
---|---|
![]() |
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.lineJoin' в этой спецификации. |
Живой стандарт |
Совместимость с брузерами
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.setLineJoin()
.
Смотрите также
- Интерфейс, предоставляющий данное свойство:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineCap
CanvasRenderingContext2D.lineWidth