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, что может пригодиться для создания интерактивных веб-сайтов и игр.