<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.