Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17331 / 1604 | Оценка: 3.91 / 4.09 | Длительность: 12:32: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. Совместимость с браузерами
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989