Тэг <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 пикселов. |
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.