CANVAS (тег в HTML)

• 16.11.2024
• HTML

CANVAS (тег в HTML)

Что такое canvas в html:

Используется для создания графики, анимации и интерактивных визуализаций на веб-странице с помощью JavaScript. Он предоставляет разработчикам платформу для рисования различных фигур, линий, текста и изображений.

Атрибуты:

1. width - ширина элемента в пикселях.
2. height - высота элемента в пикселях.

Как прописать canvas в html:

<canvas id="myCanvas" width="300" height="200"></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>

1. Для игр с анимацией, графикой и интерактивностью.
2. Для визуализации данных: диаграмм, графиков и схем.
3. Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
4. Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
5. Для создания цифрового искусства.
6. Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
7. Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.