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

JS&canvas 7/7 — Итоги

Завершаем создание часиков — придаем оттенок фону, и добавляем подписи. А также дальнейшие возможные пути развития.

День 7

За 7 дней — был написан небольшой плагин на Javascript, с помощью которого мы познакомились с некоторыми основными моментами работы с элементом canvas.

Осталось только довести часы до подобия логотипа к данному курсу, для чего модифицируем метод рисования корпуса часов drawClockBody()

До этого я не упоминал, что цвет рисования и заливки можно указывать не только с помощью html имен цветов, или указания их rgb представления в hex виде (например #b6b6b6, #fff), но также доступно использование функций из CSS — rgb(r,g,b) и ее коллеги rgba(r,g,b,a), которая позволяет задавать прозрачность. Соответственно уже знакомое указание стиля рисования будет выглядеть тогда следующим образом:

Указав новые настройки рисования выведем бледненький серый прозрачный фон для фона часов, а также опормим подпись на нем:

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

А было что-то вроде такого

Но для искусственной задачи как эта, в такой мощной параметризации нет особого смысла, разве что в целях обучения Javascript’у на очередном рабочем примере, ведь чтобы учиться программировать — нужно программировать.

Несколько отличающийся вариант реализации мною этих же часов можно найти здесь — cdpn.io/kiHoy.

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

Делись:

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

One thought on “JS&canvas 7/7 — Итоги

  1. Линда Ли:

    Огромное спасибо за уроки! Очень помогли

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

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