Все об элементе canvas HTML5
Дата публикации: 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");
Куда дальше
- следующая — Простые фигуры
- предыдущая — Глава 3. Что все это значит? Подвалы
- содержание