diff options
Diffstat (limited to 'files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html')
| -rw-r--r-- | files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..17b037d4f0 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,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('Drawing_a_full_ellipse', 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('Various_elliptical_arcs', 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> |