HTML - тег <canvas> — один из элементов HTML5. Он определяет область на веб-странице, где мы можем создавать различные объекты, изображения, анимацию, фотокомпозиции с помощью скриптов (обычно JavaScript).
Тег <canvas> - синтаксис и код
Тег <canvas> представлен парами. Содержимое записывается между открывающим (<canvas>) и закрывающим (</canvas>) тегами.
Пример разметки элемента <canvas>:
<canvas id="myCanvas" width="80" height="160" style="border:1px solid white">
Ваш браузер не поддерживает тег Canvas.
</canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Тень
ctx.shadowColor = "white";
ctx.shadowBlur = 40;
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 40, 40);
//Включить прозрачность
ctx.globalAlpha = 0.7;
ctx.fillStyle = "yellow";
ctx.fillRect(20, 60, 40, 40);
ctx.fillStyle = "green";
ctx.fillRect(20, 100, 40, 40);
</script>
Элемент canvas
Определение и использование
- HTML - тег
<canvas> используется для рисования графики на лету с помощью сценариев (обычно JavaScript);
- Тег
<canvas> является прозрачным и представляет собой всего лишь контейнер для графики;
- Для рисования графики необходимо использовать сценарий;
- Метод
getContext() возвращает объект с инструментами (методами) для рисования.
При работе с холстом важно различать такие понятия, как элемент холста и контекст элемента, которые часто путают. Этот элемент встроен в HTML (узел DOM). Контекст холста — это объект со своими свойствами и методом рендеринга. Контекст может быть 2D и 3D. Элемент холста может иметь только один контекст.
✪ Рекомендация: используйте CSS, чтобы изменить отображаемый размер холста, но лучше указать размеры, установив атрибуты ширины и высоты в <canvas> либо непосредственно в HTML, либо с помощью JavaScript.
★ Примечание: любой текст внутри элемента <canvas> будет отображаться в браузерах с отключенным JavaScript и в браузерах, не поддерживающих <canvas>.
Поддержка <canvas> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| height |
pixels |
Определяет высоту холста. Значение по умолчанию — 150 |
| width |
pixels |
Определяет ширину холста. Значение по умолчанию — 300 |
Глобальные атрибуты
Тег <canvas> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <canvas> также поддерживает атрибуты событий в HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент canvas со следующими значениями по умолчанию:
canvas {
height: 150px;
width: 300px;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
