CanvasRenderingContext2D: метод ellipse()

Метод CanvasRenderingContext2D.ellipse() API холста 2D добавляет эллиптическую дугу к текущей подтраектории.

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)

Метод ellipse() создает эллиптическую дугу, центрированную в точке (x, y) с радиусами radiusX и radiusY. Траектория начинается в точке startAngle и заканчивается в точке endAngle, следуя направлению counterclockwise (по умолчанию — по часовой стрелке).

x

Координата x (горизонтальная) центра эллипса.

y

Координата y (вертикальная) центра эллипса.

radiusX

Радиус большой оси эллипса. Должен быть неотрицательным.

radiusY

Радиус малой оси эллипса. Должен быть неотрицательным.

rotation

Угол поворота эллипса, выраженный в радианах.

startAngle

Угол, с которого начинается эллипс, отсчитываемый по часовой стрелке от положительной части оси x в радианах.

endAngle

Угол, на котором заканчивается эллипс, отсчитываемый по часовой стрелке от положительной части оси x в радианах.

counterclockwise Необязательный

Необязательное булевое значение, которое, если true, рисует эллипс против часовой стрелки. Значение по умолчанию — false (по часовой стрелке).

None (undefined).

В этом примере рисуется эллипс под углом π/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");

// Draw the ellipse
ctx.beginPath();
ctx.ellipse(100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();

// Draw the ellipse's line of reflection
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();

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• Используйте CanvasRenderingContext2D.arc() для рисования дуги окружности