Рисуем окружность и дугу
Давайте разберемся как рисуется примитив дуга и ее производная — окружность.
Дуга рисуется следующей командой:
1 |
arc(x,y, radius, startAngle, endAngle, anticlockwise); |
Давайте рассмотрим аргументы данной функции:
- 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. Анимируйте процесс рисования фигуры.