HTML-тег <canvas>
Тег <canvas> является одним из элементов HTML5. Он определяет область на веб-странице, в которой с помощью скриптов (обычно JavaScript) можно создавать различные объекты, изображения, анимации и фотомонтажи. Для отрисовки графики необходимо использовать скрипт, поскольку тег <canvas> служит лишь контейнером для графики.
При работе с canvas важно различать такие понятия, как элемент canvas и контекст элемента, которые часто путают. Этот элемент встроен в HTML (это узел DOM). Контекст canvas — это объект со своими свойствами и методами для отрисовки. Контекст может быть 2D или 3D. У элемента canvas может быть только один контекст.
Внутри тега <canvas> необходимо предоставить альтернативный контент, чтобы его могли отобразить как старые браузеры, не поддерживающие canvas, так и браузеры с отключенным JavaScript.
По умолчанию элемент <canvas> имеет размер 300x150 пикселей.
Вы можете использовать CSS для изменения отображаемого размера canvas, но лучше задавать размеры с помощью атрибутов width и height у <canvas>, либо напрямую в HTML, либо через JavaScript.
Синтаксис
Тег <canvas> является парным. Содержимое записывается между открывающим (<canvas>) и закрывающим (</canvas>) тегами.
Пример использования HTML-тега <canvas>:
Пример HTML-тега canvas|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
<script>
var c=document.getElementById('canvasExample');
var ctx=c.getContext('2d');
ctx.fillStyle='#1c87c9';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Результат
Пример использования HTML-тега <canvas> для текста:
HTML-тег <canvas>|Пример canvas|W3Docs
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>Пример использования HTML-тега <canvas> для рисования линии:
Пример HTML-тега <canvas> для рисования линии:
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.strokeStyle='#1c87c9';
ctx.stroke();
</script>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
height | пиксели | Определяет высоту элемента в пикселях. |
width | пиксели | Определяет ширину элемента в пикселях. |
Тег <canvas> поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Каковы особенности и области применения HTML-тега <canvas>?