JS&canvas 1/7 - Привет canvas
Уже год занимаюсь разработкой клиентской части одного крупного веб приложения. И только сейчас решил отвлечься от серьезных ворочаний древесных структур, таблиц и графиков, и посмотреть в сторону canvas со стороны "just for fun". Появилось желание сделать что-то свое и познать работу с canvas напрямую без посреднических плагинов, а в дальнейшем, возможно, создать своего посредника для более удобного общения с холстом.
День 1.
Первое, что как я думаю будет не сложно сделать - реализовать часы с помощью рисования примитивами на холсте. Для самого простого отображения времени понадобится рисование линий и окружности.
С рисованием линий по точкам справляется метод lineTo(x,y). Стоит упомянуть, что все методы по рисованию на холсте доступны не из объекта самого холста, а из его контекста рисования, который сначала нужно получить. Пусть у нас есть на странице есть холст с громким для самого начала идентификатором clock:
[html][/html]
чтобы получить контекст рисования в двумерной плоскости, а именно в такой мы будет рисовать, необходимо получить этот элемент в качестве javascript объекта, для этого сделаем следующее:
[js]clock.getContext('2d');[/js]
Вы спросите почему мы сразу обращаемся к переменной clock? Дело в том, что одной существенной особенностью атрибута id у html тега является то, что в объекте window автоматически создается переменная с именем равным идентификатору и ссылающаяся на этот объект. Можете проверить это позвав window.clock на странице с примером и вы получите искомый холст, хотя никаких getElementById еще не было вызвано, да еще вообще ничего не было вызвано! А холст уже сохранен в переменной! Поэтому всегда следите за уникальностью ваших идентификаторов на странице и задумывайтесь над их уникальностью, особенно при динамическом создании элементов.
Итак, помимо того, что мы получили контекст, он нам будет нужен для всех остальных методов, так что давайте его сохраним в переменную ctx, чтобы в дальнейшем уже не звать его при каждой необходимости сделать что-нибудь с нашим холстом:
[js]var ctx = clock.getContext('2d');[/js]
Чтобы сильно не переутомлять в первый же день, нарисуем пару линий и на сегодня успокоимся, но чтобы рисовать нужно еще место для этого - зададим нашему холсту размер:
[js]clock.height = 400;
clock.width = 400;[/js]
А когда есть площадь, то можно и порисовать на ней что-нибудь, но опять же, не все так сразу - сначала нужно определить стартовую точку, откуда мы будет рисовать:
[js]ctx.moveTo(10,20);[/js]
а дальше уже можно проводить черту:
[js]ctx.lineTo(100,200);[/js]
и отобразить ее:
[js]ctx.stroke();[/js]
В результате этих действий появится черная тонкая косая линия. На данные момент нет метода поменять цвет уже нарисованной линии, так же, как и что-то с ней сделать, т.е. переместить именно в координатных осях, без применения трансформаций ко всему контексту рисования. Поэтому запомним на будущее, что анимация чего-либо будет требовать перерисовки как минимум области с анимируемым элементов каждым кадром анимации, благо canvas позволяет это делать, не перерисовывая полностью все полотно.
Думаю, что на первый раз достаточно. До завтра.
Код страницы:
[html]
[/html]