使用边界检测重复形状-html5、画布、javascript

我想使用html5画布标记和javascript创建一个简单的抽象模式。我已经用一些变量、函数和对象计算出了我想要它做什么的细节，但是通过我使用的边界检测，我希望每个特定的形状在离开屏幕时回到它的起始位置（从而循环动画）

这是我的问题，这是我的代码。另外，由于我对Javascript中的OO还不熟悉，所以非常感谢任何其他结构提示

在这里查看我的进度：

---

干杯

我不确定你的确切意思是，一旦白色的大对角线从页面的右上角开始，你就希望它们从左下角开始？对吧?

您需要做的是检查线条是否超出画布的宽度和高度，在您的情况下，检查窗口本身，因为画布填充了浏览器窗口。所以你需要做一系列的条件。检查线条x+线条宽度是否>画布宽度，线条y+线条高度是否>画布高度。如果两者均为真，则将直线的x和y设置为-当时的值。比如：

if( line.x + line.width > canvas.width && line.y + line.height < 0) {
  line.x = -0;
  line.y = canvasHeight + line.height;
} 

if（line.x+line.width>canvas.width&&line.y+line.height<0）{
line.x=-0；
line.y=画布高度+line.height；
} 

这就是我如何循环从屏幕右侧进入的圆圈，一旦它们退出左侧，就从右侧重新开始

if( d.x + d.radius < 0 ) {
    d.radius = 5+(Math.random()*10);
    d.x = cwidth + d.radius;
    d.y = Math.floor(Math.random()*cheight);
    d.vX = -5-(Math.random()*5);
}

if（d.x+d.radius<0）{
d、 半径=5+（数学随机（）*10）；
d、 x=cwidth+d.半径；
d、 y=Math.floor（Math.random（）*cheight）；
d、 vX=-5-（Math.random（）*5）；
}

第一件事就是psuedo，你应该看看我做的一件事，作为这样的事情的起点。代码的结构可能需要更多的组织，画布很快就会变得非常复杂。 使用箭头键，将正方形从4条边中的任意一条移动，然后看到它从另一侧进入。

---

Fork if you want:

我希望动画循环，这样当一个形状离开屏幕时，它会返回到它的开始，并形成一个连续的循环模式。当第一个形状离开屏幕时，它会重置整个东西。通过“循环”（通常用于指时间=0时开始的基于时间的项目）你是指“环绕”（通常用于指离开屏幕右边缘并从左边缘返回的基于空间的项目）吗？@Phrogz是的，正是这样，所以图案是连续的，所以当屏幕上的每个白色形状消失时，它会回到它的开始位置，然后再次开始动画。谢谢