Javascript 为什么html画布动画为每个新矩形呈现一个临时间隙？

我有一个在html5画布上呈现的矩形或“管道”数组。在渲染（并设置动画）之前，将新管道动态添加到阵列中。问题是，每个新管道自身和前面的管道之间都有一个微小的间隙，一旦引入下一个管道，该间隙就会消失。在任何一点上都不应该有间隙

这太奇怪了，快把我逼疯了

下面的代码笔链接应该会让这个问题更清楚

const body=document.getElementsByTagName（“body”）[0]；
常数画布宽度=500；
常数画布高度=820；
const canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（“2d”）；
变量帧计数=0；
无功转速=1；
var管道=[]；
功能管（高度）{
x=画布宽度；
高度=高度；
this.update=函数（）{
ctx.fill（）；
ctx.fillStyle='黑色'；
ctx.beginPath（）；
ctx.rect（this.x，0100，this.height）；
此.x=此.x-（1*速度）；
};
}
函数设置（）{
//将空白画布渲染到dom
canvas.width=画布宽度；
canvas.height=画布高度；
body.appendChild（画布）；
}
函数绘图（）{
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//管道发生器
如果（帧计数%100==0）{
如果（帧计数%200==0）{
管道。推（新管道（100））；
}否则{
管道。推（新管道（120））；
}
}
//拔管
对于（i=0；iloop（）之所以发生这种情况，是因为在绘图函数中，所有操作都是反向进行的；-）

当前，您首先填充当前路径，然后声明它，最后更新位置。您需要以其他方式完成此操作，以便填充图形的最新版本，而不是等待一帧完成此操作

当绘制多个形状时，它看起来是固定的，因为在同一帧中，下一个形状绘制的是前一个形状的当前状态


const body=document.getElementsByTagName（“body”）[0]；
常数画布宽度=500；
常数画布高度=820；
const canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（“2d”）；
变量帧计数=0；
无功转速=1；
var管道=[]；
功能管（高度）{
x=画布宽度；
高度=高度；
this.update=函数（）{
//第一次更新位置
此.x=此.x-（1*速度）；
ctx.fillStyle='黑色'；
//然后声明路径
ctx.beginPath（）；
ctx.rect（this.x，0100，this.height）；
//最后画出来
ctx.fill（）；
};
}
函数设置（）{
//将空白画布渲染到dom
canvas.width=画布宽度；
canvas.height=画布高度；
body.appendChild（画布）；
}
函数绘图（）{
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//管道发生器
如果（帧计数%100==0）{
如果（帧计数%200==0）{
管道。推（新管道（100））；
}否则{
管道。推（新管道（120））；
}
}
//拔管
对于（i=0；iloop（）感谢您的设置超时说明：）。我是js新手（一般来说也是编程新手），从别处粘贴了这个循环函数。