Как нарисовать эллипс на Canvas?

Пользователь

от stanford_mosciski , в категории: Другие , 3 месяца назад

Как нарисовать эллипс на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от rudolph_senger , 3 месяца назад

@stanford_mosciski 

Для рисования эллипса на Canvas можно использовать метод ellipse() контекста рисования.


Синтаксис метода можно описать следующим образом:

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


где:

  • x и y - координаты центра эллипса;
  • radiusX и radiusY - радиусы по осям X и Y соответственно;
  • rotation - угол поворота эллипса (в радианах);
  • startAngle и endAngle - начальный и конечный углы дуги эллипса (в радианах);
  • anticlockwise - опциональный параметр, указывающий направление рисования дуги - по часовой стрелке (false, по умолчанию) или против часовой стрелки (true).


Пример рисования эллипса:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radiusX = 100;
var radiusY = 50;

ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, Math.PI / 4, 0, 2 * Math.PI);
ctx.stroke();


Этот код рисует эллипс с центром в центре холста размером 200x200 (предполагается, что canvas.width = 200 и canvas.height = 200). Оси эллипса повернуты на угол Math.PI / 4 (45 градусов), что делает его несимметричным. Конечный угол 2 * Math.PI указывает на то, что нужно нарисовать полный эллипс.