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>
Тег <canvas> используется для рисования графики, на лету,с помощью сценариев (обычно JavaScript).
Тег <canvas> прозрачен и является только контейнером для графики,вы должны использовать скрипт, чтобы фактически нарисовать графику.
Любой текст внутри элемента <canvas> будет отображаться в браузерах с отключенным JavaScript и в браузерах, которые не поддерживают <canvas>.
Совет: Узнайте больше об элементе <canvas> в разделе HTML Canvas учебник.
Совет: Для получения полной справки обо всех свойствах и методах, пожалуйста, посетите HTML Canvas справочник.
Поддержка браузеров <canvas>
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Атрибуты <canvas>
| Атрибут | Значение | Описание |
|---|---|---|
| height | pixels | Указывает высоту canvas. Значение по умолчанию 150 |
| width | pixels | Указывает ширину canvas значение по умолчанию равно 300 |
Глобальные атрибуты <canvas>
Тег <canvas> также поддерживает Глобальные атрибуты в HTML.
События атрибутов <canvas>
Тег <canvas> также поддерживает События атрибутов в HTML.
Еще примеры <canvas>
Другой <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>
Большинство браузеров будут отображать элемент <canvas> со следующими значениями по умолчанию:
canvas {
height: 150px;
width: 300px;
}
Попробуйте сами »