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;
}