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

JS&canvas 5/7 — Стиль

Итак, за предыдущие 4 дня мы написали отдельный плагин отображающий простенькие часики в тонких линиях.
Пора бы уже придать часам хоть какой-то стиль и сделать им циферблат — не все ведь ловко ориентируются в том, сколько сейчас времени по аналоговым часам.

День 5

Начнем, пожалуй, с циферблата. Добавим для этого метод, который будет рисовать 4 жирных линии на 3, 6, 9 и 12 часов, чтобы можно было видеть основные этапы часового времени:

Свойство lineWidth позволяет менять толщину рисуемой линии, а свойство strokeStyle — определяет цвет рисуемой линии. После вывода основных отметок часов, выведем промежуточные, для чего модифицируем цикл следующим образом:

Теперь у нас выводятся большие маркеры для отметок часов, лежащих на осях координат, а для остальных часовых меток — небольшие серые кружочки, которые можно залить с помощью метода fill, предварительно указав цвет заливки — fillStyle. Чтобы добавить минутные отметки, необходимо еще несколько изменений:

Циферблат готов, можно стилизовать оставшиеся элементы — стрелки и корпус. Для этого изменим цвет и ширину линии корпуса, а также сделаем разную ширину для каждой стрелки, при этом не забыв указать им тип окончания линии с помощью свойства контекста рисования — lineCap, которому мы присвоим значение ’round’.

Помимо рисования линий и заливок, canvas позволяет выводить текст. Давайте выведем вместо жирных и громоздких отметок цифры часов, что будет смотреться куда милее и приятнее. Для этого есть специальные методы и свойства, позволяющие определить шрифт и его размер (font), выравнивание текста в абзаце (textAlign), выравнивание по высоте (textBaseline), цвет текста определяется свойством заливки (fillStyle), а рисование текста осуществляется с помощью метода fillText(), на вход которого передается строка, а также координаты места, где ее нужно вывести.

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

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

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