MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.lineJoin

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Свойство CanvasRenderingContext2D.lineJoin предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.

См. также главу Applying styles and color в Canvas Tutorial.

Синтаксис

ctx.lineJoin = "bevel";
ctx.lineJoin = "round";
ctx.lineJoin = "miter";

Значения

Свойство может принимать три значения: round, bevel и miter. По умолчанию установленно значение miter. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.

round
Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.
bevel
"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.
miter
Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством miterLimit.

Примеры

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

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

HTML

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200, 100);
ctx.lineTo(300,0);
ctx.stroke();

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

Разница между значениями lineJoin

Пример ниже наглядно демонстрирует разницу между значениями свойства lineJoin.

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;

for (var 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

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

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

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) (Да) (Да) (Да)
Возможность Android Chrome для Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (Да) (Да) (Да) (Да) (Да) (Да)
  • В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setLineJoin().

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

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

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