Пролог

Подготовили: Евгений Рыжков и Татьяна Головко Дата публикации: 16.03.2011

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

IE Firefox Safari Chrome Opera iPhone Android
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

для IE требуется библиотека explorercanvas.

Так как же выглядит холст? На самом деле — никак. Элемент <canvas> не имеет содержимого и визуальных границ. В разметке это выглядит так:

<canvas width="300" height="225"></canvas>

На странице можно использовать несколько <canvas>. Каждый из них попадет в DOM и каждый из них будет независимым элементом. Если <canvas> присвоить атрибут id, то к нему можно будет получить доступ, как и к любому другому элементу.

Снабдим наш холст id:

<canvas id="a" width="300" height="225"></canvas>

Теперь мы можем легко найти этот элемент в DOM:

var a_canvas = document.getElementById("a");

Куда дальше

Показать комментарии