Бесшовный анимированный фон в canvas
Появилась идея сделать flappy bird, примерно представил и понял что смогу реализовать эту механику с моими знаниями. Однако появились проблемы с фоном. Я хочу чтобы он был бесшовным. У меня есть бесшовная картинка, однако я не знаю как можно высчитать это, без перебора по пикселям. Есть варианты?
Вот кусочек кода
c.drawImage(backgroundImg, 0, 0, 2000, canvas.height + 80, position, 0, 2000, 720);
position-= 3;
console.log(position);
if (position < -2000 + canvas.width) {
position = 0;
} Получилось сделать, высчитал все пиксели, все получилось, только все еще не совсем осознал как все заработало
Нужно создать два элемента фона через drawImage() на базе одной картинки... с двумя разными системами координат. Одну картинку ставишь дальше первой и во время активации функции начинаешь смещать обе картинки на одинаковое расстояние. Когда второй слой достигнет 0 и по сути заменит собой первый, нужно присвоить первому слою в качестве x-координаты (0 - длина канваса). Этот же метод можно легко приспособить для обратной ситуации, когда фон должен идти справа налево.
У меня на коленке получилось это без всяких проблем с разрывами и работы с пикселями. Если ты что-то подобное делал и у тебя все равно были разрывы, значит проблема в текстуре.