HTML тег
Тег (в пер. с англ. — холст) создает область на веб-странице, в которой можно создавать разные объекты, рисунки, анимацию, фото композиции при помощи Javascript скриптов. Тег появился в пятой версии HTML.
При работе с canvas важно различать такие понятия, как элемент canvas и контекст элемента, поскольку их довольно часто путают. Элемент canvas — это то, что встроено в HTML (узел DOM), а контекст canvas — это объект со своим методом и свойствами для визуализации. Контекстом может быть 2D и 3D. Элемент canvas может иметь только один контекст.
Синтаксис
Тег
Пример
html> html> head> title>Заголовок документа title> head> body> canvas id="myCanvas">Ваш браузер не поддерживает HTML5 элемент canvas. canvas> script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#ff9311'; ctx.fillRect(10,50,80,80); script> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> head> body> canvas id="myCanvas" width="400" height="200"> canvas> script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.font = '30pt Calibri'; context.fillStyle = 'orange'; context.fillText('Пример Canvas!', 50, 100); script> body> html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| height | pixels | Задает высоту элемента в пикселах. Значение по умолчанию — «150». |
| width | pixels | Задает ширину элемента в пикселах. Значение по умолчанию — «300». |
Для чего используется тег canvas
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега можно создавать рисунки, анимацию, игры и др.
Синтаксис
Атрибуты
height Задает высоту холста. По умолчанию 300 пикселов. width Задает ширину холста. По умолчанию 150 пикселов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE 8 IE 9 Cr Op Sa Fx
canvas Результат примера в браузере Opera показан на рис. 1.
Для чего использовать тег
- Для игр с анимацией, графикой и интерактивностью.
- Для визуализации данных: диаграмм, графиков и схем.
- Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
- Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
- Для создания цифрового искусства.
- Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
- Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.
Глобальные атрибуты
Нюансы
- Если атрибуты width или height имеют значение 0 или отрицательное значение, содержимое не будет отображаться на странице.
- Если атрибут id не указан, на нельзя ссылаться в JavaScript.
��️ Другие теги для графики и мультимедиа
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Что такое canvas в HTML5?
HTML тег
Также для этого тега стоит использовать атрибут id , благодаря которому мы сможем найти тег в JavaScript и вставить туда программу. Требует закрывающий тег .
- width — здесь вы можете установить ширину области. Изначально она равна 150px .
- height — здесь вы можете установить высоту области. Изначально она равна 300px .
JavaScript код небольшой программы:
var canavas = document.getElementById("field"); var c = canavas.getContext("2d"); c.moveTo(0,0); c.lineTo(300,70); c.stroke(); // Создаем градиент var grd = c.createLinearGradient(0,0,200,0); grd.addColorStop(0,"green"); grd.addColorStop(1,"blue"); // Заполняем область градиентом c.fillStyle = grd; c.fillRect(10,100,280,40);HTML код простейшей формы: