From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/linejoin/index.html | 143 +++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html') diff --git a/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html new file mode 100644 index 0000000000..afdeff96d3 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -0,0 +1,143 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Property +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

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

+ +

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

+ +
+

Note: Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.

+
+ +

Синтаксис

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

Значения

+ +

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

+ +

+ +
+
round
+
Скругляет углы засчет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.
+
bevel
+
"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.
+
miter
+
Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "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

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

 

+ +

Разница между значениями 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();
+}
+ +

{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

 

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}} 
+ +

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

+ +

 

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

+ +

 

+ + + + + +

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

+ + -- cgit v1.2.3-54-g00ecf