Руководство по HTML

Полный список тегов HTML

HTML: <canvas> тег

Тег <canvas> является элементом HTML5, используемым в HTML-документах в качестве контейнера для рисования 2D-объектов и bitmap-изображений и т.д. Фактические графики в этом контейнере рисуются с помощью тега <script>. Этот тег также часто называют элементом <canvas>.

Онлайн пример

Показать синий прямоугольник с помощью элемента <canvas>:

Пример

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 canvas от ru.oldtoolbag.com</title>
</head>
<body>
<h1>Пример графиков</h1>
<canvas id="w3codebox_com_canvas" width="125" height="125"></canvas>
<script>
　　var canvas = document.getElementById("w3codebox_com_canvas");
　　var ctx = canvas.getContext("2d");
　　ctx.fillStyle = "#4B6692";
　　ctx.fillRect(25, 25, 100, 100);
　　ctx.clearRect(45, 45, 60, 60);
　　ctx.strokeRect(50, 50, 50, 50);
</script>
</body>
</html>

Проверьте, пожалуйста, ›/‹

В этом примере HTML5 документа мы использовали тег <canvas> для создания контейнера размером 125px x 125px с ID 'w3codebox_com_canvas'. Тег <script> используется для рисования графиков в этом контейнере. В этом примере мы нарисовали синий прямоугольник с наклоном внутри.

Совместимость браузеров

IEFirefoxOperaChromeSafari

Теги <canvas> поддерживаются в IE 9, Firefox, Opera, Chrome и Safari.

Комментарий:Браузеры IE 8 и более ранние версии не поддерживают тег <canvas>.

Определение и описание тега

Тег <canvas> используется для рисования графиков (например, диаграмм и других изображений) с помощью скриптов (обычно JavaScript).

Тег <canvas> является только контейнером для графики, и вы должны использовать скрипты для рисования графики.

Элемент <canvas> HTML расположен внутри тега <body>.
Тег <canvas> действует как контейнер для графики. Все графики рисуются за пределами тега <canvas> с помощью тега <script> с API Canvas или API WebGL.

Различия между HTML 4.01 и HTML5

Тег <canvas> является новым тегом в HTML5.

Советы и注意事项

Комментарий:Любой текст в элементе <canvas> будет отображаться в браузерах, которые не поддерживают <canvas>.

Совет:Если вы хотите узнать все свойства и методы объекта canvas, пожалуйста, обратитесь кРеференс-руководство по HTML канвы.

Свойства

New: Новые свойства в HTML5.

Свойства	Значение	Описание
высотаHTML5	пикселей	Определяет высоту канвы.
ширинаHTML5	пикселей	Определяет ширину канвы.

Глобальные свойства

Поддержка тега <canvas> Глобальные свойства HTML.

Событийные свойства

Поддержка тега <canvas> Событийные свойства HTML.

HTML: <caption> тег HTML: <button> тег