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
|
---
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">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"><canvas id="canvas" width="200" height="200"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js; highlight:[6]">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"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<pre class="brush: js; highlight:[6,11,16]">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>
{{Specifications}}
<h2 id="Совместимость_браузера">Совместимость браузера</h2>
<p>{{Compat}}</p>
<h2 id="Изучите_также">Изучите также</h2>
<ul>
<li>Интерфейс, определяющий этот метод:{{domxref("CanvasRenderingContext2D")}}</li>
<li>Используйте {{domxref("CanvasRenderingContext2D.arc()")}}, чтобы нарисовать дугу окружности</li>
</ul>
|
