<canvas>
- 25 января 2023
Тег <canvas>
— это элемент HTML, используемый для создания графики, анимации и интерактивных визуализаций на веб-странице с помощью JavaScript. Он предоставляет разработчикам платформу для рисования различных фигур, линий, текста и изображений.
Синтаксис тега <canvas>
<canvas id="myCanvas" width="300" height="200">></canvas>
Спецификация HTML
Тег <canvas>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <canvas>
не считается семантическим, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Рисование линии:
<canvas id="myCanvas" width="300" height="200">></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
</script>
Рисование прямоугольника:
<canvas id="myCanvas" width="300" height="200">></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
</script>
Рисование изображения:
<canvas id="myCanvas" width="300" height="200">></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "image.png";
</script>
Анимация объекта:
<canvas id="myCanvas" width="300" height="200">></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
function animate() {
x++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
requestAnimationFrame(animate);
}
animate();
</script>
Создание графика:
<canvas id="myCanvas" width="600" height="400">></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var data = [10, 20, 30, 40, 50];
var colors = ["red", "orange", "yellow", "green", "blue"];
var total = data.reduce(function(sum, value) { return sum + value; }, 0);
var startAngle = 0;
for (var i = 0; i < data.length; i++) {
var sliceAngle = 2 * Math.PI * data[i] / total;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.moveTo(canvas.width/2, canvas.height/2);
ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, startAngle, startAngle+sliceAngle);
ctx.closePath();
ctx.fill();
startAngle += sliceAngle;
}
</script>
Для чего использовать тег <canvas>
- Для игр с анимацией, графикой и интерактивностью.
- Для визуализации данных: диаграмм, графиков и схем.
- Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
- Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
- Для создания цифрового искусства.
- Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
- Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.
Атрибуты тега <canvas>
width
— ширина элемента в пикселях.
height
— высота элемента в пикселях.
Глобальные атрибуты
Тег <canvas>
поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <canvas>
не поддерживается в старых версиях Internet Explorer (версия 8 и более ранние).
Нюансы
- Если атрибуты
width
илиheight
имеют значение0
или отрицательное значение, содержимое<canvas>
не будет отображаться на странице. - Если атрибут
id
не указан, на<canvas>
нельзя ссылаться в JavaScript.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <canvas>
не существует.
Чем заменить тег
Прямой замены тегу <canvas>
не существует.
Актуальность
Тег <canvas>
является актуальным, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023