Нестандартные HTML-теги. Тег canvas
CANVAS
настолько нестандартный html-тег, что с ним почти никто не работает, да и знают его не многие. А всё из-за специфичности его использования. Он ведь предназначен для создания графики. И не так уж много проектов используют CANVAS
в своём интерфейсе.
Сам по себе тег CANVAS
устроен таким образом, что внутри него указывается текст, который будет отображаться, если браузер не поддерживает эту технологию. При этом, если браузер поддерживает CANVAS
, то вы увидите пустое белое пространство с размерами, указанными в CSS-свойствах. Создают графику на CANVAS
с помощью JS.
Изначально CANVAS
был создан для возможности создания двумерной графики. На данный момент уже существуют библиотеки, с помощью которых можно создавать трёхмерные изображения. Существует очень много различных JS-библиотек, которые помогают работать с CANVAS
. Вот некоторые из них:
- LibCanvas — библиотека для создания двумерных интерактивных приложений и игр
- CreaetJS — несколько библиотек, позволяющих работать с двумерной графикой, анимацией, аудио и загрузкой объектов
- PhiloGL — фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования
Что же с ним делать?
С помощью CANVAS
можно делать множество интересных вещей. Например, загляните на Хабрахабр, там полно обзоров на самые разные разработки. Недавно мы разрабатывали конструктор-калькулятор памятников с помощью библиотеки Fabric.js. Оценить его можно, например, по этой ссылке.
CANVAS
часто сравнивают с SVG
, так как с помощью SVG
тоже можно делать различные интерактивные элементы, анимации и т.д. Но CANVAS может манипулировать SVG-элементами, в то время как SVG
содержит в себе только отдельные векторные элементы. В CANVAS
можно манипулировать любым пикселем, тогда как SVG
управляет только path-ами. Также в CANVAS
можно задавать для изображений фильтры.