Тэг <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
|
Firefox
|
Safari
|
Edge
|
Internet Explorer
|
| 1.0+ | 9.6+ | 1.5+ | 2.0+ | 12.0+ | 9.0+ |
Android
|
Safari
|
Firefox mobile
|
Opera mini
|
| 2.1+ | 3.1+ | 2.0+ | 9.0+ |
Описание
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
Синтаксис
Атрибуты
- height
- Задает высоту холста. По умолчанию 300 пикселов.
- width
- Задает ширинуу холста. По умолчанию 150 пикселов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Chrome
Opera
Firefox
Safari
Edge
Internet Explorer
Android