


JS&canvas 1/7 — Привет canvas
Уже год занимаюсь разработкой клиентской части одного крупного веб приложения. И только сейчас решил отвлечься от серьезных ворочаний древесных структур, таблиц и графиков, и посмотреть в сторону canvas со стороны «just for fun». Появилось желание сделать что-то свое и познать работу с canvas напрямую без посреднических плагинов, а в дальнейшем, возможно, создать своего посредника для более удобного общения с холстом.
День 1.
Первое, что как я думаю будет не сложно сделать — реализовать часы с помощью рисования примитивами на холсте. Для самого простого отображения времени понадобится рисование линий и окружности.
С рисованием линий по точкам справляется метод lineTo(x,y). Стоит упомянуть, что все методы по рисованию на холсте доступны не из объекта самого холста, а из его контекста рисования, который сначала нужно получить. Пусть у нас есть на странице есть холст с громким для самого начала идентификатором clock:
1 |
<canvas id="clock"></canvas> |
чтобы получить контекст рисования в двумерной плоскости, а именно в такой мы будет рисовать, необходимо получить этот элемент в качестве javascript объекта, для этого сделаем следующее:
1 |
clock.getContext('2d'); |
Вы спросите почему мы сразу обращаемся к переменной clock? Дело в том, что одной существенной особенностью атрибута id у html тега является то, что в объекте window автоматически создается переменная с именем равным идентификатору и ссылающаяся на этот объект. Можете проверить это позвав window.clock на странице с примером и вы получите искомый холст, хотя никаких getElementById еще не было вызвано, да еще вообще ничего не было вызвано! А холст уже сохранен в переменной! Поэтому всегда следите за уникальностью ваших идентификаторов на странице и задумывайтесь над их уникальностью, особенно при динамическом создании элементов.
Итак, помимо того, что мы получили контекст, он нам будет нужен для всех остальных методов, так что давайте его сохраним в переменную ctx, чтобы в дальнейшем уже не звать его при каждой необходимости сделать что-нибудь с нашим холстом:
1 |
var ctx = clock.getContext('2d'); |
Чтобы сильно не переутомлять в первый же день, нарисуем пару линий и на сегодня успокоимся, но чтобы рисовать нужно еще место для этого — зададим нашему холсту размер:
1 2 |
clock.height = 400; clock.width = 400; |
А когда есть площадь, то можно и порисовать на ней что-нибудь, но опять же, не все так сразу — сначала нужно определить стартовую точку, откуда мы будет рисовать:
1 |
ctx.moveTo(10,20); |
а дальше уже можно проводить черту:
1 |
ctx.lineTo(100,200); |
и отобразить ее:
1 |
ctx.stroke(); |
В результате этих действий появится черная тонкая косая линия. На данные момент нет метода поменять цвет уже нарисованной линии, так же, как и что-то с ней сделать, т.е. переместить именно в координатных осях, без применения трансформаций ко всему контексту рисования. Поэтому запомним на будущее, что анимация чего-либо будет требовать перерисовки как минимум области с анимируемым элементов каждым кадром анимации, благо canvas позволяет это делать, не перерисовывая полностью все полотно.
Думаю, что на первый раз достаточно. До завтра.
Код страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>День 1 - Привет canvas!</title> </head> <body> <canvas id="clock"></canvas> <script> clock.width = 400; clock.height = 400; var ctx = clock.getContext('2d'); ctx.moveTo(10,20); ctx.lineTo(100,200); ctx.stroke(); </script> </body> </html> |
Оставь комментарий!