пример
Нарисовать красный квадрат, на лету, и показать его внутри <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 Учебник .
Совет: Для полного ведения всех свойств и методов , которые могут быть использованы с целью холста, перейдите на наш HTML Canvas Reference .
Атрибуты
= Новое в HTML5.
| Атрибут | Стоимость | Описание |
|---|---|---|
| height | pixels | Определяет высоту холста |
| width | pixels | Определяет ширину холста |
Глобальные атрибуты
<canvas> тег также поддерживает Глобальные атрибуты в HTML .
Атрибуты событий
<canvas> тег также поддерживает Атрибуты событий в HTML .
Настройки по умолчанию CSS
Никто.