Круглые часы на Canvas

Метки: / /

В этой статье вы узнаете, как сделать круглые canvas часы, в низу сможете скачать код программы, она была взята со этого сайта.

Если хотите сделать обычные часы, то посмотрите статью
«Часы на JavaScript».

Делаем часы на Canvas:

Первым делом нужно объявить нужные функцию в которой будет код всей программы.

Внутри объявляем переменные, которые будут хранить в себе секунды, минуты и часы, в конце берём canvas элемент и делаем его для 2D рисования.

Дальше уже делаем базовые настройки canvas, чтобы всё правильно отображалось.

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

В этой части кода делаем циферблат, пока без стрелок, пока только полоски которые будут указывать на время, вначале из настраиваем, потом отрисовываем внутри цикла for.

Рисуем всё что мы описали раньше, достаём всё  ранее сохранённое в стэки и снова сохраняем в стеки.

В этом коде делаем минутную стрелку, в конце опять всё сохраняем в стэк.

Это последний кусочек кода в функции clockPainting(), и тут мы точно по такому же принципу, как и в предыдущем кусочки, но уже делаем секундную стрелку.

Теперь всё это нужно добавить в интервал в одну секунду.

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

Круглые часы на JavaScript

Вывод:

В этой статье вы прочитали как сделать Canvas часы, как видите кода достаточно много, но он не сильно сложный.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: