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

JS&canvas 3/7 — Анимация стрелок

Сегодня сделаем первые шаги в анимации canvas. Рисуем двигающиеся стрелки часов.

День 3

Аналогично методу drawSeconds в предыдущем дне создаем методы для минутной и часовой стрелок (drawMinutes, drawHours):

Но добавлять их в метод инициализации не будем, так как это приведет всего лишь к однократному их вызову. А нам ведь нужно, чтобы они перерисовывались в соответствии с текущим временем. Как это сделать? Есть несколько способов. Возьмем простейший — перерисовать все полностью. Создадим метод update(), который и будет этим заниматься. Первое, что он будет делать — очищать холст с помощью метода clearRect, который принимает на вход координаты верхней левой точки прямоугольника, а также его ширину и высоту, тогда при вызове со следующими аргументами он очистит весь холст:

после чего можно снова рисовать стрелки и часы, при этом не забываем обновить текущее время для отображения наших часов:

Функция обновления отображения времени готова. Осталось ее запустить должным образом, а для этого меняем метод инициализации часов:

Который теперь будет вызывать функцию update каждую секунду и каждую секунду наши часы будут перерисовываться.

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

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

Материалы к уроку:
Делись:

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

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

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