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' в этой спецификации. |
Живой стандарт |
Совместимость браузера
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Изучите также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D
- Используйте
CanvasRenderingContext2D.arc()
, чтобы нарисовать дугу окружности