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

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

День 1.

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

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

[html]<canvas id="clock"></canvas>[/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]

<!DOCTYPE html>

<html>

<head>

<title>День 1 - Привет canvas!</title>

</head>

<body>

clock.width = 400;

clock.height = 400;

var ctx = clock.getContext('2d');

ctx.moveTo(10,20);

ctx.lineTo(100,200);

ctx.stroke();

</script>

</body>

</html>

[/html]