Умберто Эко

JavaScript. Canvas. Помогите сделать вторую анимацию двигающегося квадрата.

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

В этой статье мы рассмотрим, как создать вторую анимацию двигающегося квадрата с помощью JavaScript и Canvas.

Шаг 1: Настройка Canvas

Первым шагом является создание холста Canvas на веб-странице. Для этого нам нужно создать тег canvas в HTML-коде:

<canvas id="myCanvas"></canvas>

Затем мы можем получить доступ к холсту в JavaScript, используя его идентификатор:

const canvas = document.getElementById("myCanvas");

Далее, мы должны задать размеры холста, чтобы он отображался правильно на странице:

canvas.width = 600;
canvas.height = 400;

Шаг 2: Отрисовка квадрата на Canvas

Для отрисовки квадрата на холсте Canvas мы будем использовать метод fillRect(). Этот метод принимает четыре аргумента – координаты x и y верхнего левого угла прямоугольника, а также его ширину и высоту.

const ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 50, 50);

На этом этапе мы рисуем квадрат красного цвета с размером 50x50 на холсте.

Шаг 3: Создание анимации

Теперь мы готовы создать анимацию движения квадрата.

Для этого мы будем использовать метод requestAnimationFrame(), который позволяет запланировать выполнение функции на следующем кадре анимации.

function animate() {
  requestAnimationFrame(animate);
}

animate();

Таким образом, функция animate() будет вызываться на каждом кадре анимации, но пока что она не делает ничего полезного.

Шаг 4: Движение квадрата

Теперь мы можем осуществить движение квадрата, добавив код для изменения его координат на каждом кадре анимации:

let x = 50;
let y = 50;
let speed = 2;

function animate() {
  requestAnimationFrame(animate);

  x += speed;

  if (x > canvas.width - 50 || x < 0) {
    speed = -speed;
  }

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 50, 50);
}

animate();

Здесь мы создаем переменные для координат x и y квадрата, а также для скорости его движения. Затем мы изменяем значение x на каждом кадре анимации, а если квадрат выходит за пределы холста, мы меняем направление движения.

Наконец, мы очищаем холст и заново отрисовываем квадрат с новыми координатами.

Заключение

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

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