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
|
---
title: CanvasRenderingContext2D.ellipse()
slug: Web/API/CanvasRenderingContext2D/ellipse
tags:
- API
- Canvas
- CanvasRenderingContext2D
- Справка
- метод
translation_of: Web/API/CanvasRenderingContext2D/ellipse
---
<div>{{APIRef}}</div>
<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox notranslate">void <em>ctx</em>.ellipse(<em>x</em>, <em>y</em>, <em>radiusX</em>, <em>radiusY</em>, <em>rotation</em>, <em>startAngle</em>, <em>endAngle</em> [, <em>anticlockwise</em>]);
</pre>
<p><code>ellipse()</code> - метод, который создаёт эллиптическую дугу с центром в точках <code>(x, y)</code> с радиусом <code>radiusX</code> и <code>radiusY</code>. Путь начинается от точки <code>startAngle</code> и заканчивается в точке <code>endAngle</code>, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) <code>anticlockwise</code> .</p>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>x</code></dt>
<dd>Координата центра эллипса по оси x (горизонтальная).</dd>
<dt><code>y</code></dt>
<dd>Координата центра эллипса по оси y (вертикальная).</dd>
<dt><code>radiusX</code></dt>
<dd>Радиус оси x эллипса. Должен быть неотрицательным.</dd>
<dt><code>radiusY</code></dt>
<dd>Радиус оси y эллипса. Должен быть неотрицательным.</dd>
<dt><code>rotation</code></dt>
<dd>Вращение эллипса, выраженное в радианах.</dd>
<dt><code>startAngle</code></dt>
<dd>Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
<dt><code>endAngle</code></dt>
<dd>Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.</dd>
<dt><code>anticlockwise</code> {{optional_inline}}</dt>
<dd>Опция {{jsxref("Boolean")}}, которая при <code>true</code>, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно <code>false</code> - рисование по часовой стрелке (clockwise).</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Рисование_полного_эллипса">Рисование полного эллипса</h3>
<p>Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="200"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6] notranslate">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Рисование эллипса
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();
// Рисование линии отражения эллипса
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
</pre>
<h4 id="Результат">Результат</h4>
<p>{{ EmbedLiveSample('Рисование_полного_эллипса', 700, 250) }}</p>
<h3 id="Различные_эллиптические_дуги">Различные эллиптические дуги</h3>
<p>В этом примере создаются три эллиптических контура с различными свойствами.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<pre class="brush: js; highlight:[6,11,16] notranslate">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * .25, 0, Math.PI * 1.5);
ctx.fill();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * .25, 0, Math.PI);
ctx.fill();
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * .25, 0, Math.PI, true);
ctx.fill();
</pre>
<h4 id="Результат_2">Результат</h4>
<p>{{ EmbedLiveSample('Различные_эллиптические_дуги', 700, 180) }}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_браузера">Совместимость браузера</h2>
<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
<h2 id="Изучите_также">Изучите также</h2>
<ul>
<li>Интерфейс, определяющий этот метод:{{domxref("CanvasRenderingContext2D")}}</li>
<li>Используйте {{domxref("CanvasRenderingContext2D.arc()")}}, чтобы нарисовать дугу окружности</li>
</ul>
|
