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
<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 * 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 Standard # dom-context-2d-ellipse-dev |
Совместимость с браузерами
BCD tables only load in the browser
Изучите также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D
- Используйте
CanvasRenderingContext2D.arc()
, чтобы нарисовать дугу окружности