HTML5 캔버스 애니메이션은 가장자리에서 생기고 자연스럽게 돌아갑니다.

Question

페이지마다 여러 가지 다른 요소가 서로 다른 속도로 떠 있습니다. 요소가 페이지의 오른쪽을 떠날 때 왼쪽에 떠 있어야합니다. element.x가 canvas.width보다 큰 경우 element.x = -100이면 쉽습니다. 이것은 조금 더 멀리 설정되어있어 보이지 않게 보입니다. 하지만 이제는 문제가 있습니다. 요소가 페이지의 왼쪽에 있으면 어떻게해야합니까? < canvas.width를 element.x 경우 일부 요소가 자연적으로 다시 떠 캔버스의 외부에있을 것 때문에 우리는 말을하지 못할. 당신의 도움을 위해

감사합니다 이것에 대해 갈 수있는 몇 가지 방법이 있습니다

Answer 1

.

완전히 오프 스크린 인 경우 (교차점이없는 경우) 요소를 다른 쪽으로만 "이동"하는 것입니다. 그런 다음 이동하면 화면이 항상 한 픽셀 만 교차합니다.

또 다른 하나는 마지막 위치를 추적하거나 궤적을 알고 "어디에서 왔는지"확인하는 것입니다 (애니메이션을 작성하는 경우이 사실을 알고있을 것입니다). 그것이 왼쪽에서오고 오른쪽으로 가면 오른쪽에 있습니다. 화면을 벗어나면 이동해야합니다. 그러나 왼쪽에서 오른쪽으로 가고 화면 왼쪽에있는 왼쪽에있는 경우 왼쪽으로 가면 그 진입과 OK를 알 수 있습니다.