如何修复在JavaScript中使用ctx.lineTo显示为奇怪形状的六边形？

我试图在画布上创建一个六边形。我成功地画出了一个形状，但不是正确的。我用同样的代码片段做了一个三角形，我只是改变了边的数目

看起来六边形的每条线都是从同一点绘制的，而不是从最后绘制的点绘制的

我正在遵循一个在线教程，其中涉及到创建这些形状。我复制并粘贴了视频中的那个家伙所做的事情，我准确地输入了他所做的事情。我在视频中多次返回，试图找出我是否错过了什么

在代码中，是我创建六边形的整个类。正在渲染和绘制某些内容，但形状不正确

我试着改变一些数字，查看ctx.line，看看我是否做错了什么。我在视频中走来走去，而他正在创建这些形状，他的工作刚刚开始。我相信我有与视频中创建六边形相同的代码

class Asteroid {
  constructor(x, y) {
    this.visible = true;
    this.x = Math.floor(Math.random() * canvasWidth);
    this.y = Math.floor(Math.random() * canvasHeight);
    this.speed = 1;
    this.radius = 50;
    this.angle = Math.floor(Math.random() * 359);
    this.strokeColor = gameColor;
  }
  Update() {
    let radians = (this.angle / Math.PI) * 180;
    this.x += Math.cos(radians) * this.speed;
    this.y += Math.sin(radians) * this.speed;
    if (this.x < this.radius) {
      this.x = canvas.width;
    }
    if (this.x > canvas.width) {
      this.x = this.radius;
    }
    if (this.y < this.radius) {
      this.y = canvas.height;
    }
    if (this.y > canvas.height) {
      this.y = this.radius;
    }
  }
  Draw() {
    ctx.beginPath();
    let vertAngle = (Math.PI * 2) / 6;
    var radians = (this.angle / Math.PI) * 180;
    for (let i = 0; i < 6; i++) {
      ctx.lineTo(
        this.x - this.radius * Math.cos(vertAngle * i + radians),
        this.y - this.radius * Math.sin(vertAngle * i + radians)
      );
      ctx.closePath();
      ctx.stroke();
    }
  }
}

class小行星{
构造函数（x，y）{
可见=真实；
this.x=Math.floor（Math.random（）*画布宽度）；
this.y=Math.floor（Math.random（）*画布高度）；
这个速度=1；
这个半径=50；
this.angle=Math.floor（Math.random（）*359）；
this.strokeColor=gameColor；
}
更新（）{
设弧度=（this.angle/Math.PI）*180；
这个.x+=数学cos（弧度）*这个.speed；
this.y+=Math.sin（弧度）*this.speed；
if（此.x<此半径）{
这个.x=canvas.width；
}
if（this.x>canvas.width）{
这个.x=这个半径；
}
if（此.y<此半径）{
this.y=canvas.height；
}
if（this.y>canvas.height）{
this.y=this.radius；
}
}
画（）{
ctx.beginPath（）；
设顶点角=（Math.PI*2）/6；
var弧度=（this.angle/Math.PI）*180；
for（设i=0；i<6；i++）{
ctx.lineTo(
this.x-this.radius*Math.cos（垂直角*i+弧度），
this.y-this.radius*Math.sin（顶点角度*i+弧度）
);
ctx.closePath（）；
ctx.stroke（）；
}
}
}

---

我希望形状是一个正六边形，但我得到的是一个形状，其中每条线都是从一个点绘制的，就像扇子或叶子一样。

调用

closePath

（这是一条线，用于在子路径中输入点，因此所有线都指向第一个点）和

在for循环后只绘制一次

for (let i = 0; i < 6; i++) {
  ctx.lineTo(
    this.x - this.radius * Math.cos(vertAngle * i + radians),
    this.y - this.radius * Math.sin(vertAngle * i + radians)
  );
}
// once all the points have been drawn
ctx.closePath(); // Last closing line
ctx.stroke(); // paint

for（设i=0；i<6；i++）{
ctx.lineTo(
this.x-this.radius*Math.cos（垂直角*i+弧度），
this.y-this.radius*Math.sin（顶点角度*i+弧度）
);
}
//一旦所有的点都画好了
ctx.closePath（）；//最后一行
ctx.stroke（）；//油漆
谢谢！我想弄明白这一点，真是疯了。我甚至不认为这两个函数用错了花括号。