Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19801 / 2044 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 18:

HTML5. Основы Canvas

Аннотация: Элемент <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. Холст
  2. Контекст отрисовки
  3. Совместимость с браузерами
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990
Евгений Снегиренко
Евгений Снегиренко
Россия, г. Кемерово