Элемент <canvas> определяет область в документе, которую можно использовать для рисования графики на лету с помощью скриптов (обычно JavaScript). Например, его можно использовать для рисования контуров и фигур, диаграмм и даже для анимации.
| Тип: | Inline |
| Контент: | Inline, и текст |
| Открывающий тег: | Обязательный |
| Закрывающий тег: | Обязательный |
| Версия: | Новый в HTML5 |
Синтаксис
Базовый синтаксис тега <canvas> выглядит следующим образом:
HTML / XHTML: <canvas> ... </canvas>Примеры написания кода тега <canvas>:
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>
Вы можете (и должны) предоставлять альтернативный контент внутри элемента
<canvas>. Этот контент будет отображаться как в старых браузерах, которые не поддерживают <canvas>, так и в браузерах с отключенным JavaScript.
Специальные атрибуты тега
В следующей таблице приведены атрибуты, которые относятся к тегу <canvas>:
| Атрибут | Значение | Описание |
|---|---|---|
width |
pixels | Устанавливает ширину <canvas>. |
height |
pixels | Устанавливает высоту <canvas>. |
Глобальные атрибуты
Как и все другие HTML-теги, тег <canvas> поддерживает все глобальные атрибуты в HTML5.
Атрибуты для событий
Тег <canvas> так же поддерживает атрибуты событий в HTML5.
Поддержка браузеров
Тег <canvas> поддерживается во всех основных браузерах.
