Элемент <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> поддерживается во всех основных браузерах.

Читайте также

Похожие посты

HTML-тег <header>

Определяет заголовок документа или раздела

HTML-тег <base>

Определяет базовый URL для всех связанных объектов на странице

HTML-тег <legend>

Определяет заголовок для элемента <fieldset>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.