Javascript 通过增加lineTo参数上的值来设置画布上线条的动画

我试图在画布上制作一条线的动画，直到屏幕的顶部。所以这条线会垂直移动。我使用object创建了一条新线，添加了两种方法，一种用于绘制线，另一种用于更新moveTo y参数和lineTo y参数

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

function random(min, max) {
    const num = Math.floor(Math.random() * (max - min + 1)) + min;
    return num;
}

function Line( mtX, mtY, ltX, ltY, ltVX, mtVY, color, exists){
    this.mtX = mtX;
    this.mtY = mtY;
    this.ltX = ltX;
    this.ltY = ltY;
    this.mtVY = mtVY;
    this.ltVX = ltVX;
    this.color = color;
    this.exists = exists
 }

 Line.prototype.draw = function(){
ctx.beginPath(); 
// Staring point (0,550)
ctx.moveTo(this.mtX, this.mtY);
console.log(this.mtY)
// End point (300, 550)
ctx.lineTo(this.ltX, this.ltY);
// Set the line color
ctx.strokeStyle = this.color
// Make the line visible
ctx.stroke();
}



Line.prototype.update = function(){

  if(this.mtY <= 0 || this.ltY <= 0){
  this.exists = false
  }
  this.mtY -= this.mtVY
  this.ltY -= this.ltVX
}
let testLine = new Line(0, 550, 300, 550, 29, 29, 'green', true)
 function loop(){
if(testLine.exists){
    testLine.update();
    testLine.draw();

} 
requestAnimationFrame(loop)
}
loop();

const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const width=canvas.width=window.innerWidth；
const height=canvas.height=window.innerHeight；
随机函数（最小值、最大值）{
const num=Math.floor（Math.random（）*（max-min+1））+min；
返回num；
}
功能行（mtX、mtY、ltX、ltY、ltVX、mtVY、颜色、存在）{
this.mtX=mtX；
this.mtY=mtY；
this.ltX=ltX；
this.ltY=ltY；
this.mtVY=mtVY；
这一点。ltVX=ltVX；
这个颜色=颜色；
this.exists=存在
}
Line.prototype.draw=函数（）{
ctx.beginPath（）；
//起始点（0550）
ctx.moveTo（this.mtX，this.mtY）；
console.log（this.mtY）
//终点（300550）
ctx.lineTo（this.ltX，this.ltY）；
//设置线条颜色
ctx.strokeStyle=this.color
//使线可见
ctx.stroke（）；
}
Line.prototype.update=函数（）{
如果（this.mtY