HTML <canvas> Тег
Пример
Нарисуйте красный квадрат на лету и покажите его внутри элемента <canvas>:
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Определение и использование
Тег <canvas> используется для рисования графики на лету с помощью сценариев (обычно JavaScript).
Тег <canvas> является только контейнером для графики, необходимо использовать сценарий для рисования графики.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Различия между HTML 4,01 и HTML5
Тег <canvas> является новым в HTML5.
Советы и примечания
Примечание: Любой текст внутри элемента <canvas> будет отображаться в обозревателях, не поддерживающих <canvas>.
Совет: Подробнее о элементе <canvas> в нашем HTML Canvas Tutorial.
Совет: Для полной ссылки на все свойства и методы, которые могут быть использованы с объектом Canvas, перейдите на наш HTML Canvas Ссылки.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| height | pixels | Задает высоту холста |
| width | pixels | Задает ширину холста |
Глобальные атрибуты
Тег <canvas> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <canvas> также поддерживает Атрибуты событий в HTML.
Параметры CSS по умолчанию
В большинстве обозревателей элемент <canvas> будет отображаться со следующими значениями по умолчанию:
Пример
canvas {
height: 150px;
width: 300px;
}