Тэг <canvas>
Элемент <canvas>, добавленный в HTML5, предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.
«Canvas» в переводе с английского означает «холст».
Приложения от Mozilla поддерживают <canvas> начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas> начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>.
Элемент <canvas> также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на вебстраницах.
Chrome
|
Opera
|
Safari
|
Firefox
|
Internet Explorer
|
Android
|
iOS
|
| 6.0+ | 9.6+ | 3.1+ | 4.0+ | 9.0+ | 2.1+ | 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 |
| XHTML: | 1.0 | 1.1 |
Описание
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
Синтаксис
Атрибуты
| height | Задает высоту холста. По умолчанию 300 пикселов. |
| width | Задает ширину холста. По умолчанию 150 пикселов. |
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Chrome
Opera
Safari
Firefox
Internet Explorer
Android
iOS