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

< 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>

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