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
|
---
title: CanvasRenderingContext2D.closePath()
slug: Web/API/CanvasRenderingContext2D/closePath
tags:
- API
- Canvas
- Method
translation_of: Web/API/CanvasRenderingContext2D/closePath
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> - метод из Canvas 2D API, добавляет в путь линию от текущей до первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый). Если путь пустой или содержит одну точку, этот метод ничего не делает.</p>
<p>Сама функция ничего не рисует. Он лишь позволяет отрисовывать путь таким методам, как {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} и {{domxref("CanvasRenderingContext2D.fill()", "fill()")}}.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">void <em>ctx</em>.closePath();
</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Замкнутый_треугольник">Замкнутый треугольник</h3>
<p>В этом примере создаются две первые линии сторон треугольника с использованием метода <code>lineTo()</code>. После чего метод <code>closePath()</code> заканчивает рисование треугольника, автоматически соединяя первую и последнюю точки фигуры (в данном случае треугольника).</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<p>Точки треугольника находятся в координатах (20, 150), (120, 20),и (220, 150).</p>
<pre class="brush: js; highlight:[8]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 140); // Двигает перо к нижнему левому углу
ctx.lineTo(120, 10); // Рисует линию к верхнему углу
ctx.lineTo(220, 140); // Рисует линию к нижнему правому углу
ctx.closePath(); // Рисует линию к нижнему левому углу
ctx.stroke();
</pre>
<h4 id="Результат">Результат</h4>
<p>{{ EmbedLiveSample('Замкнутый_треугольник', 700, 180) }}</p>
<h3 id="Закрытие_пути_один_раз">Закрытие пути один раз</h3>
<p>Этот пример рисует смайлик, состоящий из трёх не соединённых дуг (под путей).</p>
<div class="blockIndicator note">
<p>Хотя <code>closePath()</code> вызывается после создания всех дуг, закрывается только последняя.</p>
</div>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<p>Первые две дуги создают глаза, последняя создаёт рот.</p>
<pre class="brush: js; highlight:[10]">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
</pre>
<h4 id="Результат_2">Результат</h4>
<p>{{ EmbedLiveSample('Закрытие_пути_один_раз', 700, 180) }}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
</ul>
|
