CanvasRenderingContext2D.ellipse()

CanvasRenderingContext2D.ellipse() - метод Canvas 2D API, который добавляет эллиптическую дугу к текущему подпространству.

Синтаксис

void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);

ellipse() - метод, который создает эллиптическую дугу с центром в точках (x, y) с радиусом radiusX и radiusY. Путь начинается от точки startAngle и заканчивается в точке endAngle, идет по направлению, казанному в параметре (по часовай срелке или против нее) anticlockwise .

Параметры

x
Координата центра эллипса по оси x (горизонтальная).
y
Координата центра эллипса по оси y (вертикальная).
radiusX
Радиус оси x эллипса. Должен быть неотрицательным.
radiusY
Радиус оси y эллипса. Должен быть неотрицательным.
rotation
Вращение эллипса, выраженное в радианах.
startAngle
Угол, под которым начинается эллипс, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
endAngle
Угол, под которым эллипс заканчивается, измеряется по часовой стрелке от положительной оси x и выражается в радианах.
anticlockwise Необязательный
Опция Boolean, которая при true, рисует эллипс против часовой стрелки (counter-clockwise). Значение по умолчанию равно false  - рисование по часовой стрелке (clockwise).

Примеры

Рисование полного эллипса

Этот пример рисует эллипс под углом π / 4 Радианы (45°). Чтобы сделать полный эллипс, дуга начинается под углом 0 радианов (0°) и заканчивается под углом 2π радианов (360°).

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

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();

Результат

Различные эллиптические дуги

В этом примере создаются три эллиптических контура с различными свойствами.

HTML

<canvas id="canvas"></canvas>

JavaScript

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();

Результат

Спецификации

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.ellipse' в этой спецификации.
Живой стандарт

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
ellipse
Экспериментальная
Chrome Полная поддержка 31Edge Полная поддержка 13Firefox Полная поддержка 48IE Нет поддержки НетOpera Полная поддержка 18Safari Полная поддержка 9WebView Android Полная поддержка 4.4.3Chrome Android Полная поддержка 31Firefox Android Полная поддержка 48Opera Android Полная поддержка 18Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 2.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

Изучите также