Средний
7 уроков
Курс
JS & canvas
В этом курсе, состоящим из 7 статей Роман Спиридонов познакомит вас с canvas.

JS&canvas 2/7 — Начинаем с примитивов

Пора переходить к делу. Ведь время идет, а часов, чтобы посмотреть ему вслед, все еще нет. Нужно срочно исправлять ситуацию!

День 2.

Чтобы упростить дальнейшую разработку и доработку плагина, разобьем логику рисования часов на несколько блоков:

  • Рисование самих часов, их корпус.
  • Рисование циферблата.
  • Рисование секундной стрелки.
  • Рисование минутной стрелки.
  • Рисование часовой стрелки.

Для начала сделаем корпус часов. Для этого воспользуемся методом arc(), который рисует дугу окружности. На вход этот метод принимает координаты центра окружности, радиус окружности, а также градусы ограничения дуги. Чтобы нарисовать полную окружность, мы ограничим дугу значением 2*PI. Также нам понадобятся координаты центра окружности — возьмем центр холста:

Помним, что координаты при рисовании считаются от левого верхнего угла, т.е. ось Х направлена слева направо, а ось У — сверху вниз. Радиус циферблата будет равен 150:

Теперь все для рисования окружности есть:

Если мы не стерли шаги с первого урока, то получится следующая картина:

Day2_0

Canvas автоматически продолжил нашу первую линию до начала окружности и все это нарисовал. Что ж, для предотвращения такого в контексте рисования есть специальный метод для начала новой линии — beginPath(), а также можно закончить предыдущую линию, что не обязательно, так как при вызове beginPath делается автоматически — closePath();

Вставим перед arc() метод beginPath() и вот результат:

Day2_1

Для первой версии корпуса достаточно, оборачиваем это в функцию, а константы выносим за нее:

Сразу же добавим функцию инициализации наших часов, которая и будет вызывать все остальные:

Стрелки — это будут линии разной длины от центра к окружности. Чтобы нарисовать их, нам осталось узнать координаты кончиков стрелок, так как первой координтой будет уже известный нам центр окружности. Все координаты стрелок положим в один объект position:

Чтобы посчитать координаты, куда нам нужно рисовать стрелки, необходимо знать время. Для этого создадим объект с датой:

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

Для рисования стрелки начнем новую линию, перейдем в центр окружности и нарисуем линию по полученным координатам, а также обернем весь этот код в функцию drawSeconds:

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

Не забудем добавить вызов drawSeconds() в функцию init(). Теперь при загрузке страницы у нас рисуется не только корпус часов, но и секундная стрелка, которая поворачивается только при перезагрузке страницы. На сегодня все!

Код страницы day2.html

Делись:

Оставь комментарий!

2 thoughts on “JS&canvas 2/7 — Начинаем с примитивов

  1. daniladaniladanila:

    Забыл математику, можете пояснить вот эту формулу:

    position.sec.x = cX + Math.cos(angleS) * R * 0.9;

    В частности, что такое 0.9 ?

    1. Roman Spiridonov:

      Ответ на ваш вопрос в записи за 4 день. К сожалению, поздно увидел ваш комментарий. 0,9 — коэффициент, задающий длину секундной стрелки в сравнении с радиусом корпуса часов.

Добавить комментарий

Рекомендуемые курсы