HTML Тег <canvas>
Пример
Нарисуйте красный прямоугольник на лету и покажите его внутри элемента <canvas>:
<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</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>
будет отображаться в браузерах с отключенным JavaScript и в браузерах, которые не поддерживают
<canvas>.
Совет: Узнайте больше об элементе <canvas> в разделе
HTML Canvas учебник.
Совет: Для получения полной справки обо всех свойствах и методах, пожалуйста, посетите HTML Canvas справочник.
Поддержка браузеров
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| height | pixels | Указывает высоту canvas. Значение по умолчанию 150 |
| width | pixels | Указывает ширину canvas значение по умолчанию равно 300 |
Глобальные атрибуты
Тег <canvas> также поддерживает Глобальные атрибуты в HTML.
События атрибутов
Тег <canvas> также поддерживает События атрибутов в HTML.
Еще примеры
Пример
Другой <canvas> пример:
<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
// Включите прозрачность
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Попробуйте сами »
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <canvas> со следующими значениями по умолчанию: