JS&canvas 1/7 — Привет canvas

Уже год занимаюсь разработкой клиентской части одного крупного веб приложения. И только сейчас решил отвлечься от серьезных ворочаний древесных структур, таблиц и графиков, и посмотреть в сторону canvas со стороны «just for fun». Появилось желание сделать что-то свое и познать работу с canvas напрямую без посреднических плагинов, а в дальнейшем, возможно, создать своего посредника для более удобного общения с холстом.

День 1.

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

С рисованием линий по точкам справляется метод lineTo(x,y). Стоит упомянуть, что все методы по рисованию на холсте доступны не из объекта самого холста, а из его контекста рисования, который сначала нужно получить. Пусть у нас есть на странице есть холст с громким для самого начала идентификатором clock:

чтобы получить контекст рисования в двумерной плоскости, а именно в такой мы будет рисовать, необходимо получить этот элемент в качестве javascript объекта, для этого сделаем следующее:

Вы спросите почему мы сразу обращаемся к переменной clock? Дело в том, что одной существенной особенностью атрибута id у html тега является то, что в объекте window автоматически создается переменная с именем равным идентификатору и ссылающаяся на этот объект. Можете проверить это позвав window.clock на странице с примером и вы получите искомый холст, хотя никаких getElementById еще не было вызвано, да еще вообще ничего не было вызвано! А холст уже сохранен в переменной! Поэтому всегда следите за уникальностью ваших идентификаторов на странице и задумывайтесь над их уникальностью, особенно при динамическом создании элементов.

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

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

А когда есть площадь, то можно и порисовать на ней что-нибудь, но опять же, не все так сразу — сначала нужно определить стартовую точку, откуда мы будет рисовать:

а дальше уже можно проводить черту:

и отобразить ее:

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

Думаю, что на первый раз достаточно. До завтра.

Код страницы: