21. Canvas Animation

HTML: Скелет. Урок 5: Canvas Animation

Иллюстрация к уроку В этом уроке мы погрузимся в мир анимации с использованием элемента <canvas> в HTML. Canvas позволяет нам создавать динамические и интерактивные визуализации прямо в браузере, используя JavaScript.

Что такое Canvas и как он работает?

Элемент <canvas> сам по себе является просто контейнером для графики. Вся магия происходит с помощью JavaScript, который рисует на этом контейнере пиксели, линии, фигуры и текст. Для создания анимации нам нужно многократно перерисовывать canvas с небольшими изменениями, создавая иллюзию движения.

Давайте начнем с простого примера: рисуем движущийся круг.

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Animation</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d"); // Получаем 2D контекст для рисования

    let x = 0; // Начальная позиция круга по оси X
    let radius = 20; // Радиус круга

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем canvas перед каждой перерисовкой
      ctx.beginPath(); // Начинаем новый путь для рисования
      ctx.arc(x, canvas.height/2, radius, 0, 2 * Math.PI); // Рисуем круг
      ctx.fillStyle = "blue"; // Задаем цвет заливки
      ctx.fill(); // Заливаем круг
      x++; // Изменяем позицию круга
      if (x > canvas.width + radius) {
        x = -radius; // Возвращаем круг в начало, когда он выходит за пределы canvas
      }
      requestAnimationFrame(draw); // Запрашиваем следующий кадр анимации
    }

    draw(); // Запускаем анимацию
  </script>

</body>
</html>

В этом коде:

canvas.getContext("2d") возвращает объект контекста рисования, который предоставляет методы для рисования фигур, текста, изображений и других объектов.
ctx.clearRect(0, 0, canvas.width, canvas.height) очищает canvas перед каждой перерисовкой, чтобы не оставалось следов от предыдущих кадров.
requestAnimationFrame(draw) — это ключевая функция для анимации. Она сообщает браузеру, что мы хотим выполнить анимацию, и браузер вызывает нашу функцию draw перед следующей перерисовкой экрана. Это обеспечивает плавную анимацию с оптимальной частотой кадров.

Управление скоростью анимации

Мы можем контролировать скорость анимации, добавляя задержку или изменяя величину приращения x (позиции круга). Например, чтобы замедлить движение:

x += 0.5; // Меньшее значение приращения

Жизненный пример

Canvas animation широко используется в различных областях:

Игры: Многие веб-игры создаются с использованием Canvas, обеспечивая высокую производительность и контроль над графикой.
Визуализация данных: Canvas позволяет создавать интерактивные графики и диаграммы для отображения данных. Например, библиотеки вроде Chart.js используют Canvas.
Рекламные баннеры: Динамичные рекламные баннеры часто используют Canvas для создания привлекательных анимаций.
Интерактивные элементы интерфейса: Canvas может быть использован для создания кастомных элементов управления, таких как слайдеры, кнопки и т.д.
Фреймворки: Многие JavaScript фреймворки (например, PixiJS, Three.js) используют Canvas или WebGL (расширение Canvas) для рендеринга графики.

Ключевые моменты

canvas.getContext("2d") - получение контекста для рисования.
requestAnimationFrame() - функция для плавной анимации.
Необходимо очищать canvas перед каждой перерисовкой (clearRect()).
Canvas предоставляет множество методов для рисования фигур, текста и изображений.
Canvas является мощным инструментом для создания интерактивной графики в браузере.