Рисуем окружность и дугу

Давайте разберемся как рисуется примитив дуга и ее производная — окружность.

Дуга рисуется следующей командой:

Давайте рассмотрим аргументы данной функции:

• x, y — координаты центра, вокруг которого будет рисоваться окружность.
• radius — радиус окружности, безразмерная величина.
• startAngle — начальный угол, начало отсчета. Задается в радианах. Счет идет по часовой стрелке с правой части окружности. На рисунке начало отсчета показано «0».
• endAngle — конечный угол. В радианах. Так, полной окружности соответствует угол 2pi.
• anticlockwise — направление рисования. По-умолчанию рисуем против часовой стрелки, значение true. Если мы хотим рисовать по часовой стрелке — false.

Углы при работе в canvas измеряются в радианах. Углу 90° соотвествует значение Pi/2, углу 180° — Pi, а полной окружности — 2*Pi. Для получения числа Pi можно воспользоваться функцией Math.PI.

Для удобства, на рисунке приведено вычисленное значение числа Pi.

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

See the Pen Arc, рисование дуги и окружности by Alex (@Asmodey) on CodePen.

Как рисовать линии в canvas читайте в предыдущем уроке.

Выполнить

Задание 1. Нарисуйте дугу от 0° до 270°.Выполните рисование по часовой и против часовой стрелки.

Задание 2. Разработайте интерфейс, в котором пользователь может задать радиус дуги, начальный и конечный угол, с помощью checkbox задается направление рисования и дополнительный checkbox определяет залита ли фигура или нет. Скрипт должен на основе вводимых данных строить дугу.

Задание 3. Анимируйте процесс рисования фигуры.