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
|
---
title: CanvasRenderingContext2D.lineCap
slug: Web/API/CanvasRenderingContext2D/lineCap
tags:
- API
- Canvas
- Property
translation_of: Web/API/CanvasRenderingContext2D/lineCap
---
<div>{{APIRef}}</div>
<p>Свойство <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineCap</code></strong> предоставляемое Canvas 2D API определяет, как будут выглядеть концы нарисованных линий. </p>
<div class="blockIndicator note">
<p><strong>Примечание:</strong> Линии могут быть нарисованы с помощью методов {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, и {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} methods.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre><em>ctx</em>.lineCap = "butt" || "round" || "square";</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>butt</code></dt>
<dd>Концы линий прямые.</dd>
<dt><code>round</code></dt>
<dd>Концы линий скруглённые.</dd>
<dt><code>square</code></dt>
<dd>Концы линий прямые, но к ней с обоих концов добавляется поле с шириной равной толщине линии и высотой равной половине от толщины линии.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Использование свойства lineCap</h3>
<p>Ниже представлен простой фрагмент кода, использующий <code>lineCap.</code></p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas></pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.lineTo(100, 100);
ctx.stroke();</pre>
<h4 id="Результат">Результат</h4>
<p>{{ EmbedLiveSample('Использование_свойства_lineCap', 700, 180) }}</p>
<h3 id="A_lineCap_example" name="A_lineCap_example">Разница между значениями lineCap</h3>
<p>В примере нарисованы три линии с разными значениями <code>lineCap</code>. Для наглядности мы добавим две направляющие. Каждая линия будет начинаться и заканчиваться этими направляющими.</p>
<p>Левая линия будет использовать значение lineCap <code>"butt"</code>. Она не будет выходить за направляющие. Средняя линия будет нарисована со значением lineCap <code>"round"</code>. За направляющие будут выходить полукруги с диаметром равным толщине линии. Правая линия будет использовать значение <code>"square"</code>. Она будет выходить за направляющие на поля с шириной равной толщине линии и высотой равной половине толщины.</p>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
</div>
<pre class="brush: js">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lineCap = ['butt', 'round', 'square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
for (let i = 0; i < lineCap.length; i++) {
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25 + i * 50, 10);
ctx.lineTo(25 + i * 50, 140);
ctx.stroke();
}</pre>
<p>{{EmbedLiveSample("Разница_между_значениями_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</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-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<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.lineCap")}}</p>
<h3 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h3>
<ul>
<li>В браузерах на базе Webkit и Blink помимо этого свойства, также поддерживается нестандартный метод <code>ctx.setLineCap()</code>.</li>
</ul>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс, предоставляющий данное свойство {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
<li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
</ul>
|
