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