Тег <canvas> (в пер. с англ. - холст) создает область на веб-странице, в которой можно создавать разные объекты, рисунки, анимацию, фото композиции при помощи Javascript скриптов. Тег появился в пятой версии HTML.
При работе с canvas важно различать такие понятия, как элемент canvas и контекст элемента, поскольку их довольно часто путают. Элемент canvas - это то, что встроено в HTML (узел DOM), а контекст canvas - это объект со своим методом и свойствами для визуализации. Контекстом может быть 2D и 3D. Элемент canvas может иметь только один контекст.
Синтаксис
Тег <canvas> парный, его содержимое пишется между открывающим (<canvas>) и закрывающим (</canvas>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<canvas id="myCanvas">Ваш браузер не поддерживает HTML5 элемент canvas.</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#ff9311';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Результат
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = 'orange';
context.fillText('Пример Canvas!', 50, 100);
</script>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| height | pixels | Задает высоту элемента в пикселах. Значение по умолчанию - "150". |
| width | pixels | Задает ширину элемента в пикселах. Значение по умолчанию - "300". |
Тег <canvas> поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4+ | 2+ | 3.1+ | 9+ |
Практикуйте свои знания
Что представляет собой HTML-тег <canvas>?
Правильный!
Неправильно!