Предыдущий ролик Следующий ролик  

Видео урок: Тег Canvas

HTML5: графика и анимация с Canvas

Давайте познакомимся с элементом canvas. Элемент canvas предоставляет веб страницам место, где можно создавать различную графику всех видов: формы, рисунки, текст, линии, все виды объектов. Просто представьте, что это листок бумаги на странице, где ваш скриптовый код может рисовать все, что он захочет. Тег canvas поддерживается всеми новыми браузерами, и я их здесь перечислил. То есть, если у вас современная версия какого-то конкретного браузера, то он должен поддерживать тег canvas. Браузеры, которые не поддерживают canvas, отобразят резервный контекст.

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

Далее, важно знать, что контекст canvas создается на лету при помощи скрипта. Это обозначает, что если вы нарисовали что-то в canvas, то ему не нужно возвращаться; он не становится частью страницы DOM. То есть, эта информация находится на экране, и если вы хотите ее запомнить, вы должны позаботиться об это сами. Как только все прорисовано, скриптовый движок об этом забывает. Эти элементы хороши для динамических визуальных медиа, но canvas не подходят для вещей, которыми вы захотите манипулировать позже при помощи скрипта, для этого предназначается SVG, и немного позже мы это рассмотрим.

Давайте взглянем на тег canvas. Система координат canvas начинается в верхнем левом углу, и у нее есть две оси с увеличивающимися значениями X, идущими слева направо, и с осью Y, идущей сверху вниз. Каждый элемент canvas сразу невидим, и это обозначает, что у всех них прозрачный черный задний фон. Итак, это черный canvas со значением opacity, установленном на 0, то есть, этого элемента не видно. Этот график показывает вам, как выглядит система координат. С левой стороны у нас ось Y, по ней увеличиваются значения сверху вниз.

И есть ось X, которая ведет слева направо, и у нас есть 0, 0 указывает вот на этот угол, и ширина и высота идут в правый нижний угол. Тег canvas объявляется при помощи слова 'canvas', и обычно вы сюда вставляете ID, потому что вы будете получать его из скрипта, а также ширину (width) и высоту (height). А этот резервный контент (fallback content), который находится внутри тега canvas, отобразится пользователю, если его браузер не понимает, что такое canvas. У элементов canvas также есть атрибуты и функции, вот они. Это width и height, которые определяют ширину и высоту canvas, а также есть несколько методов.

Это toDataURL и getContext. Давайте рассмотрим каждый из них. Свойства width и height довольно понятны сами по себе. Они обозначают ширину и высоту элемента canvas, и если вы их не определили, по умолчанию он будет 300 пикселей шириной и 150 пикселей высотой. Важно это отметить, а также обозначить значения, которые могут быть установлены. Вы можете динамически менять ширину и высоту canvas из вашего кода. Метод toDataURL берет контекст canvas и делает из него статический рисунок в качестве URL данных.

Чтобы сделать это, вы передаете тип желаемого рисунка методу toDataURL, например, image/png, и эта поддержка будет осуществлена в соответствии со спецификацией W3C. Но некоторые браузеры могут выбирать другие форматы, например, image/jpeg или image/gif. То есть, этот метод принимает контекст и возвращает вам закодированный Base64 URL данных. Метод getContext, возможно, наиболее важен. Он получает контекст для canvas, и этот контекст содержит информацию о canvas, и дает ее всем методам, при помощи которых вы будете рисовать.

То есть всем методам для настройки цветов, стилей окаймления, рисования фигур и так далее, все это делается с использованием контекста. Давайте перейдем в наш редактор кода и создадим наш первый canvas. Ок, вот я в Aptana Studio, теперь я открываю файлы с примерами. Вы можете перейти в папку Exercise Files, вот я захожу в нее, затем захожу в этот урок и вижу нужный файл. Это наш Firstcanvas_start.html. Также я захожу в файл с кусками кода, и к нему я буду обращаться в течение всего этого курса.

На самом деле, этот файл содержит все куски кода для всех примеров, чтобы перейти от начальной версии до конечной. Я буду использовать этот файл, чтобы вам не пришлось смотреть, как я набираю код. Если у вас есть доступ к этому файлу, вы можете следовать за мной и вставить нужный кусок в редактор кода. Первое, что мы сделаем, это вставим canvas в этот документ. Я вставляю его прямо сюда в body. Итак, я перехожу в Snippets, беру этот canvas и вставляю его. Давайте сохраним. Вот это тег canvas, вот его ID, а здесь width и height.

А вот тут резервный контекст. И в нем просто сказано: "Your browser does not support canvas". Все верно, давайте посмотрим на это в браузере. Давайте посмотрим. Я дважды щелкаю мышкой, и вы видите, что ничего не показано. Помните, я говорил, что все canvas изначально невидимы. Поэтому нам нужно что-то сделать, чтобы этот canvas стал видимым. Вернемся к коду. Я снова возвращаюсь к файлу с кусками кода и копирую это объявление стилей. Также как и для других HTML элементов вы можете определять стили, которые влияют на теги canvas.

Я копирую это, возвращаюсь в исходный код, и вставляю это сюда в head. Итак, я определил стиль для canvas с этим ID, и вот у него есть пунктирная 3хпиксельная черная рамка и светло серый задний фон. Сохраняем, возвращаемся в браузер, обновляем. Вот, теперь вы видите, что canvas стал видимым, здесь пунктирная рамка, а задний фон светло серый.

Давайте посмотрим, как наш элемент выглядит в другом браузере. Это IE. Давайте откроем документ в Firefox, и вы видите, что он выглядит так же. Теперь мы знаем, как выглядит тег canvas. Мы знаем, как определить для него стиль и сделать его видимым. Теперь давайте сравним canvas с SVG, а затем мы уже начнем рисовать.