We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность 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,