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

Question

[Dmitriy G]

Нужно выполнить такой пункт:
передвижение логотипа должно быть цикличным — если логотип выходит за пределы канваса, то исчезнувшая часть должна появиться с противоположной стороны.


как это сделать?
Код логотипа и передвижения
Видео как должно быть

Comments

[Дмитрий Щ]

Привет, как с тобой можно связаться? Застрял на этом же задании

Answer 1

[RAX7]

Рисуй логотип внутри паттерна и для анимации задавай трансформацию для паттерна.

https://developer.mozilla.org/en-US/docs/Web/API/C...

Answer 2

[Karpion]

А как именно логотип рисуется?

Можно тупо сделать так:

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

Я понятно объяснил?

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

Answer 3

[Elvis]

тут вижу 2 варианта
1) отслеживаешь когда координаты выходят за пределы видимого поля, у тебя это 0 и 400, и перерисовываешь на несколько объектов, так как у тебя уже не 3 палки, а 2 с одной стороны и 1-2 с другой
2) но проще размножить твою фигуру по X и Y на расстоянии 400 пикселей от краев. тогда при перемещении за границы с другой стороны будет появляться другая, точно такая же фигура, что придаст нужный эффект.