Дрейвинг эллипса с методом Канваса

Нарисуем овал методом дуги, как для круга, но изменяя радиус в зависимости от направления.

Drawinger un ovale avec canvas HTML 5

На самом деле мы нарисуем эллипс, который является более точным овальным случаем. Согласно Вольфрам, овал не имеет математического определения, в отличие от эллипса (хотя все виды овалов соответствуют формуле). Эллипс как круг, видимый в перспективе. Она определяется геометрической фигурой с двумя осями симметрии, в то время как окружность полностью симметрична.
Итак, для простоты, скажем так, то, что мы будем рисовать здесь - это двойной симметричный овал или сплющенный круг !

Создание эллипса выполняется методом масштабирования. Этот метод изменяет пропорции объекта после его определения.

scale(x, y)

Аргументами являются горизонтальное и вертикальное соотношение. Например, если значение x равно 0.5, изображение уменьшится в направлении ширины на 50%.

Если мы хотим создать эллипс, который в два раза шире, чем выше, мы дадим значение x 1 и коэффициент y 0,5. 

<canvas id="canvas3" width="400" height="200"></canvas>

function oval()
{
  var canvas = document.getElementById("canvas3"); 
  var context = canvas.getContext("2d");
  context.lineWidth="4";
  context.strokeStyle="green";
  context.scale(1, 0.5);
  context.beginPath();
  context.arc(200, 200, 180, 0, 2 * Math.PI);
  context.stroke();
}
oval();

Надо заметить одну вещь. Хотя высота каневаса составляет 100 пикселей, для аргумента y методу дуги было указано значение 100.
Это потому, что метод скала применяется к координатам фигуры в каневасе, а не только к ее форме.
Отношение 50% аргумента y масштаба применяется к аргументу y дуги, следовательно, к вертикальному положению рисунка.

К сожалению, отношение применяется и к ширины линии, в результате чего график эллипса не имеет ровной толщины.

Полный код для рисования эллипса

Чтобы иметь правильный контур, необходимо восстановить первоначальный контекст после вызова масштаба и до удара, чтобы отменить изменение пропорций в отношении толщины контура (при этом применяя его форму).

Окончательный код для рисования всего овального :

<canvas id="canvas4" width="400" height="200"></canvas>

function drawOval(x, y, rw, rh)
{
  var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
  context.save();
  context.scale(1,  rh/rw);
  context.beginPath();
  context.arc(x, y, rw, 0, 2 * Math.PI);
  context.restore();
  context.lineWidth=4;
  context.strokeStyle="orange";
  context.stroke();  
}

drawOval(200,200,180, 90);

В параметрах задаются горизонтальный и вертикальный радиус. Вертикальное соотношение для метода масштабирования - это отношение этих двух лучей, rh/rw.

Документы и статьи, касающиеся :