Javascript 当我更改一行时，画布中的所有行都会更改颜色

我很喜欢画自动绘制的线条，我希望它回到中间，并在超出画布大小时改变颜色。一切都完成了，它在中间很好地恢复，颜色也变好了。但是有一个小问题！我之前画的所有线条都变成了同一种颜色。。。。我已经找了一个小时没有解决办法了^^

你能帮我吗

以下是我的代码中我认为对这个问题最重要的部分：

这是我的台词

function Line(x0, y0, x1, y1, color) {
              this.x0 = x0;
              this.y0 = y0;
              this.x1 = x1;
              this.y1 = y1;
              this.color = color;
              this.draw = function() {
                ctx.strokeStyle = this.color;
                ctx.moveTo(this.x0, this.y0,)
                ctx.lineTo(this.x1, this.y1);
                ctx.stroke();
              }
            } 

有我的功能创建线

var x = cx;
var y = cy;
var color = randomColor();
var lines = [];

function loop() {
    var newx = randomPoint(x, 100);
    var newy = randomPoint(y, 100);
    var line = new Line(x, y, newx, newy, color);
    x = newx;
    y = newy;

    lines.push(line);

    if(x > canvas.width || y > canvas.height || x < 0 || y < 0) {
        x = cx;
        y = cy;
        color = randomColor();
    }

    lines[0].draw();
    lines = [];

    time = setTimeout(loop, 50);
}

var x=cx；
var y=cy；
var color=randomColor（）；
var行=[]；
函数循环（）{
var newx=随机点（x，100）；
var newy=随机点（y，100）；
变量行=新行（x，y，newx，newy，颜色）；
x=newx；
y=新的；
推（线）；
如果（x>canvas.width | | y>canvas.height | | x<0 | | y<0）{
x=cx；
y=cy；
颜色=随机颜色（）；
}
线[0]。绘制（）；
行=[]；
时间=设置超时（循环，50）；
}

您需要在

绘图函数的顶部添加一个
ctx.beginPath（）
：


类行{
构造函数（x0、y0、x1、y1、颜色）{
这是x0=x0；
这1.y0=y0；
这是1.x1=x1；
这是1.y1=y1；
这个颜色=颜色；
}
抽签（ctx）{
ctx.beginPath（）；
ctx.strokeStyle=this.color；
ctx.lineWidth=4；
ctx.moveTo（this.x0，this.y0）；
ctx.lineTo（this.x1，this.y1）；
ctx.stroke（）；
}
} 
函数randomColor（）{
返回['red'，'green'，'blue'，'yellow'，'cyan'，'magenta'][Math.random（）*6 | 0]；
}
const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const maxWidth=window.innerWidth；
const maxHeight=window.innerHeight；
常数cx=最大宽度/2 | 0；
常数cy=最大高度/2 | 0；
canvas.width=最大宽度；
canvas.height=最大高度；
设计数器=0；
设x0=cx；
设y0=cy；
让颜色=随机颜色（）；
函数drawLine（）{
常数x1=x0+Math.random（）*200-100；
常数y1=y0+Math.random（）*200-100；
新线（x0，y0，x1，y1，颜色）。绘制（ctx）；
x0=x1；
y0=y1；
如果（x0<0 | | y0<0 | | x0>maxWidth | | y0>maxHeight）{
x0=cx；
y0=cy；
颜色=随机颜色（）；
}
如果（++计数器>500）{
clearInterval（intervalID）；
}
}
const intervalID=setInterval（拉线，100）
正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
#帆布{
宽度：100%；
身高：100%；
}
事实上，我的关节有问题！这就是为什么你看起来不连续！即使使用第二个代码，我只有在重新启动时才有路径，但这看起来就像我在创建新段时有路径一样！你有办法修好它吗？要连续看吗？我发现了问题，问题是移动到！但是我需要用它！我不知道如何在每种颜色开始时只使用一次。如果我理解正确，如果你想要的是，一旦线条离开画布，它就会回到中心（画一条线），然后切换到不同的颜色并重新开始，你需要添加
ctx.lineTo（cx，cy）
和
ctx.stroke（）在这两个示例中，
ctx.beginPath（）前面的
。