HTML5. Основы Canvas

Остался еще один элемент, который нельзя не рассмотреть, в контексте изучения HTML5, а именно <canvas>, или холст. Холст используется для размещения изображений на веб – странице, в том числе и динамических.

До появления холста, при необходимости размещения динамического изображения необходимо было либо создавать php – скрипт, либо flash – анимацию. В отдельных случаях возможно было использовать средства Java Applet или ActiveX.

Все три указанных способа требуют наличия установленного плагина, А ActiveX– работают только в Internet Explorer. Если учесть возможность наличия на стороне пользователя программного обеспечения блокирующего загрузку flash – роликов и изображений, то размещение изображения на веб – странице, тем более динамического, перестает казаться тривиальной задачей. Целью веб – разработчика, помимо прочих, также является гарантированное получение пользователем всей необходимой информации.

Рассмотрим, что же с учетом современных условий, может предложить <canvas> разработчику.

Элемент <canvas>

<canvas> — это новый элемент html5, который позволяет создавать изображения на сайте с помощью веб – сценариев.

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

Элемент <canvas> похож на элемент <img>, различие в том что у него нет атрибутов src и alt. У <canvas> есть только 2 атрибута – ширина и высота. Если эти атрибуты отсутствуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.

Основы концепции

<canvas> создает поверхность для рисования, дающую контекст отрисовки, которая используется для создания отображаемого контента и манипуляций с ним. Иными словами, данный тег создает прямоугольную область, на которой можно "рисовать" при помощи JavaScript.

Единственным поддерживаемым на данный момент является двумерный контекст отрисовки, В будущем скорее всего будет добавлен 3D контекст.

Размещается на HTML – странице <canvas> следующим образом:

<canvas> </canvas>

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

Чтобы программным путем использовать холст, прежде всего необходимо получить его контекст (context). После этого можно выполнить необходимые действия по отношению к контексту, а затем окончательно применить к нему их результат. Т.е. непосредственно отрисовка происходит после того, как все действия по отношению к холсту определены.

С учетом того, что <canvas> поддерживается не всеми браузерами, или их версиями, разработчикам рекомендуют использовать его только в тех задачах, где холст не может быть заменен другими элементами.

На момент написания лекции была заявлена базовая поддержка <canvas> следующими браузерами:

• Internet Explorer 9
• Firefox (версии 9 - 12)
• Chrome (версии 17 - 18)
• Safari (версии 5.0 – 5.1)
• Opera (11.6)
• iOS Safari 5.0
• Opera Mobile 12.0
• Android Browser (версии 3.0 – 4.0)

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

<canvas> Данная версия браузера не поддерживает canvas элемент </canvas>

Разумеется, в качестве аварийного содержимого может быть использован не только текст.

Рисование на холсте

Перед тем как начать рисование, необходимо получить экземпляр объекта Web-обозревателя CanvasRenderingContext2D для данной канвы. Это выполняется вызовом единственного метода getContext объекта HTMLCanvasElement. К примеру:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

Метод getContext принимает единственный параметр — строку "2d". Возвращает метод экземпляр объекта CanvasRenderingContext2D, представляющий контекст рисования данной канвы.

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

CSS и элемент canvas

Canvas может иметь такие же атрибуты стиля как и у <img> (margin, border, background и т.д.). Если стиль не задан, то первоначально он полностью прозрачный.

Как и в случае большинства элементов HTML, для добавления рамок, пробелов, полей и т.п. в элемент canvas можно использовать CSS-стили. Кроме того, некоторые атрибуты CSS наследуются содержимым canvas. Хорошим примером этого могут служить шрифты, поскольку по умолчанию к шрифтам, рисуемым на холсте, применяются настройки, используемые для самого элемента canvas.

Ключевые термины и определения

Аварийное содержимое – под термином понимается содержимое новых тегов HTML5, таких как <audio>, <video>, <canvas>, которое отображается в случае, если браузер пользователя не поддерживает указанные теги.

Холст (<canvas>) – новый элемент HTML5, предназначенный для создания графики при помощи веб - сценариев (обычно JavaScript). Он может быть использован, к примеру, для рисования графиков, создания фото-композиций, или для создания простых анимаций.

Краткие итоги

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

Главное, что нужно понимать, когда вы говорите о <canvas> это то, что фактически изображение генерируется на стороне клиента, посредством веб – сценариев. При этом нет необходимости в наличии, каких – либо, дополнительных модулей плагинов и прочего. Во всяком случае, так должно быть, и к этому HTML5, как стандарт, стремится. Сейчас использовать <canvas> необходимо с осторожностью, обязательно предусматривая наличие аварийного содержимого.

Список материалов для самостоятельного изучения

1. Холст
   • https://developer.mozilla.org/en/HTML/Canvas
   • http://www.w3schools.com/html5/html5_canvas.asp
   • http://uroki-html.ru/html5/html5_canvas.php
2. Контекст отрисовки
   • http://www.w3.org/TR/2dcontext/
3. Совместимость с браузерами
   • http://caniuse.com/#search=canvas