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

Попробуйте сами »