CanvasRenderingContext2D.lineJoin

Свойство 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();
}
ScreenshotLive sample

 

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

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

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

 

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

Легенда

Полная поддержка  
Полная поддержка

 

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

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