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

【问题标题】：HTML5 Canvas animations which animate off of the edges and return seamlessly?HTML5 Canvas 动画从边缘动画并无缝返回？
【发布时间】：2011-12-15 21:43:36
【问题描述】：

我有许多不同的元素以不同的速度在页面上浮动。当一个元素离开页面的右侧时，它应该开始漂浮在左侧。这很容易，如果 element.x 大于 canvas.width，element.x = -100。这让它看起来更远一些，所以它看起来不会跳动。但是现在问题来了，如果元素离开页面的左侧，我该怎么办？我们不能说 if element.x

感谢您的帮助

【问题讨论】：

标签： html animation canvas

【解决方案1】：

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

一个是仅在元素完全离开屏幕（如果有零交叉点）时才将元素“移动”到另一侧。然后移动它意味着你总是只与屏幕相交一个像素。

另一种方法是通过跟踪它的最后位置或知道它的轨迹来检查“它来自哪里”（如果你正在制作动画，你可能知道这一点）。如果它从左边来并向右走，而你在右边，它会离开屏幕，你必须移动它。但如果它从左到右，而你在屏幕的左侧，你就知道它的进入并且没问题。

【讨论】：

谢谢，我想我已经实现了你的第二个想法。我基本上检查了所有 4 个面都正常，但根据物体行进的方向，它会被移动。