HTML5 Canvas动画可以动画边缘并无缝返回？

Question

我有许多不同的元素以不同的速度漂浮在页面周围。当元素离开页面的右侧时，它应该开始在左侧浮动。如果element.x大于canvas.width，element.x = -100，这很容易。这使它更进一步，所以它看起来不那么尖锐。但现在问题是，如果元素离开页面的左侧，我该怎么做呢？我们不能说如果element.x＆lt; canvas.width因为某些元素自然会在画布的外部浮动回来。

感谢您的帮助

Answer 1

有几种方法可以解决这个问题。

一种情况是，如果元素完全在屏幕外（如果交叉点为零），则仅将元素“移动”到另一侧。然后移动它意味着你总是只与一个像素相交。

另一种方法是通过跟踪其最后位置或了解其轨迹来检查“它来自哪里”（如果你是动画，你可能知道这一点）。如果它来自左边并且向右移动并且你在右侧，则它离开屏幕而你必须移动它。但是，如果它从左侧出现并向右移动并且您在屏幕的左侧侧，则表示它已进入并且正常。