Html5画布移动线

Question

您好我正在尝试创建一条逐渐增长的虚线。如果你看看我的小提琴，你会看到虚线相互碰撞，我的数学技能并不是很好。我可以使用一些帮助。我知道虚线在同一时间都在增长，它们之间的距离也必须增长。 （不知道如何做到这一点）

我相信我的问题在于我的线功能

      let speed = 1;

function Line(x1, y1, x2, y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;

      this.update = lines => {
          //Move points over time

          this.y1 += speed;
          this.y2 += speed + 0.3;
          if(this.y2 >= 600){
              this.y2 += speed * 0.30;
              this.draw();
          }else if(this.y2 >= 700){
            this.y1 += speed / 0.40;
            this.draw();
          }else if(this.y2 >= 900){
            this.y2 += speed * 0.55;
            this.draw();
          }
          this.draw();
          console.log(lines[0].y2);
      }  this.draw = () => {
        c.beginPath();
        c.moveTo(innerWidth/4, innerHeight);
        c.lineTo(innerWidth/2, 400);
        c.lineTo(innerWidth/1.333,innerHeight);
        c.moveTo(this.x1, this.y1);
        c.lineTo(this.x2, this.y2);
        c.strokeStyle="#b97de9";
        c.stroke();
      }
    }

https://jsfiddle.net/mjuc01ck/9/