CanvasRenderingContext2D.ellipse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

JavaScript

js
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

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

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(60, 75, 50, 30, Math.PI * 0.25, 0, Math.PI * 1.5);
ctx.fill();

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.ellipse(150, 75, 50, 30, Math.PI * 0.25, 0, Math.PI);
ctx.fill();

ctx.fillStyle = "green";
ctx.beginPath();
ctx.ellipse(240, 75, 50, 30, Math.PI * 0.25, 0, Math.PI, true);
ctx.fill();

Результат

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

Specification
HTML
# dom-context-2d-ellipse-dev

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ellipse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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