Я делаю простую программу рисования с использованием JavaScript. Инструмент круга работает как задумано, но как добавить инструмент для рисования эллипса / овала?
Я повторно использовал большую часть кода для создания различных инструментов (карандаш, линия, прямоугольник и круг), и пока все хорошо. Но я не могу понять, как правильно нарисовать эллипс.
Вот текущий и рабочий код для рисования круга, заполненного случайным цветом:
var radius = Math.max(
Math.abs(ev._x - tool.x0),
Math.abs(ev._y - tool.y0)
) / 2;
var x = Math.min(ev._x, tool.x0) + radius;
var y = Math.min(ev._y, tool.y0) + radius;
context.fillStyle = 'hsl(' + 360 * Math.random() + ', 85%, 50%)';
context.beginPath();
context.arc(x, y, radius, 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.fill();
Я пытался интегрировать его с уже используемым кодом и context.scale, но я не понял его правильно:
var radius = Math.max(
Math.abs(ev._x - tool.x0),
Math.abs(ev._y - tool.y0)
) / 2;
var radius2 = ;
var x = Math.min(ev._x, tool.x0) + radius;
var y = Math.min(ev._y, tool.y0) + radius;
context.save();
context.scale(1, radius2/radius);
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI);
context.restore();
context.lineWidth=2;
context.strokeStyle="#000";
context.stroke();
Правильно ли указан радиус радиуса, и я пишу переменную radius2? Весь код здесь JS Bin