HTML - тег <canvas>
Пример
На лету нарисуйте красный прямоугольник и покажите его внутри элемента <canvas>:
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</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 .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую элемент.
Element | |||||
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Атрибуты
Attribute | Value | Description |
---|---|---|
height | pixels | Specifies the height of the canvas. Default value is 150 |
width | pixels | Specifies the width of the canvas Default value is 300 |
Глобальные атрибуты
Тег <canvas>
также поддерживает глобальные атрибуты в HTML .
Атрибуты события
Тег <canvas>
также поддерживает атрибуты событий в HTML .
Дополнительные примеры
Пример
Другой пример <canvas>:
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
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 {
height: 150px;
width: 300px;
}