Dimgol
@Dimgol

Как сделать canvas цикличным?

Нужно выполнить такой пункт:
передвижение логотипа должно быть цикличным — если логотип выходит за пределы канваса, то исчезнувшая часть должна появиться с противоположной стороны.
5f1027a526980998870678.jpeg
5f1028204196b703126449.jpeg
как это сделать?
Код логотипа и передвижения
Видео как должно быть
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
RAX7
@RAX7
Рисуй логотип внутри паттерна и для анимации задавай трансформацию для паттерна.

https://developer.mozilla.org/en-US/docs/Web/API/C...
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Dr_Elvis
@Dr_Elvis
тут вижу 2 варианта
1) отслеживаешь когда координаты выходят за пределы видимого поля, у тебя это 0 и 400, и перерисовываешь на несколько объектов, так как у тебя уже не 3 палки, а 2 с одной стороны и 1-2 с другой
2) но проще размножить твою фигуру по X и Y на расстоянии 400 пикселей от краев. тогда при перемещении за границы с другой стороны будет появляться другая, точно такая же фигура, что придаст нужный эффект.
Ответ написан
@Karpion
А как именно логотип рисуется?

Можно тупо сделать так:
  1. привести координаты логотипа к виду, где левый верхний угол логотипа находится в области канваса - прибавляя или вычитая размер канваса;
  2. нарисовать логотип четыре раза: на нужном месте, левее на размер канваса, выше на размер канваса и левее-ниже на размер канваса (размер канваса берётся по соответствующей координате).
Я понятно объяснил?

PS: Можно проверять необходимость рисовать дополнительные копии логотипа.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы