1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: CanvasRenderingContext2D.lineJoin
slug: Web/API/CanvasRenderingContext2D/lineJoin
tags:
- API
- Canvas
- Property
translation_of: Web/API/CanvasRenderingContext2D/lineJoin
---
<div>{{APIRef}}</div>
<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> предоставляемое Canvas 2D API определяет форму вершин в которых линии сходятся. Длина линий должна быть ненулевой.</p>
<p>См. также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p>
<div class="blockIndicator note">
<p><strong>Note:</strong> Lines can be drawn with the {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, and {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";</pre>
<h3 id="Значения">Значения</h3>
<p>Свойство может принимать три значения: <code>round</code>, <code>bevel</code> и <code>miter</code>. По умолчанию установлено значение <code>miter</code>. Имейте ввиду, что свойство никак не повлияет на линии направленные в одну сторону, потому что не будет создана зона пересечения.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
<dl>
<dt><code>round</code></dt>
<dd>Скругляет углы за счет добавления сектора с центром в точке пересечения линий и радиусом равным толщине линии.</dd>
<dt><code>bevel</code></dt>
<dd>"Срезает" угол, рисуя треугольник с вершинами в точке пересечения линий и крайних точках каждой линии.</dd>
<dt><code>miter</code></dt>
<dd>Соединяет линии в одной точке, расширяя для этого их границы и заполняя пространство ромбами . Установка этого эффекта осуществляется свойством {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineJoin</h3>
<p>Ниже представлен простой фрагмент кода, использующий <code>lineJoin</code> для скругления места соединения линий.</p>
<p> </p>
<h4 id="HTML">HTML</h4>
<pre><code><canvas id="canvas"></canvas></code></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre><code>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();</code></pre>
<h4 id="Result">Result</h4>
<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
<p> </p>
<h3 id="A_lineJoin_example" name="A_lineJoin_example">Разница между значениями lineJoin</h3>
<p>Пример ниже наглядно демонстрирует разницу между значениями свойства <code>lineJoin.</code></p>
<p> </p>
<div class="hidden">
<pre><code><canvas id="canvas" width="150" height="150"></canvas></code></pre>
</div>
<pre><code>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();
}</code></pre>
<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
<p> </p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p> </p>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>
<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
<p> </p>
<h2 id="Особенность_WebKitBlink">Особенность WebKit/Blink</h2>
<ul>
<li>
<p>В<span id="cke_bm_84C" class="hidden"> </span> браузерах на базе Webkit и Blink помимо этого свойства, также поддерживается нестандартный метод <code>ctx.setLineJoin()</code>.</p>
</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс, предоставляющий данное свойство: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
</ul>
|
