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

Question

我正在尝试在 canvas 上创建一个六边形。我成功绘制了一个形状，但不是正确的形状。我使用相同的代码片段制作了一个三角形，我只是更改了边数。

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

我正在学习一个涉及创建这些形状的在线教程。我复制并粘贴了视频中那个人所做的事情，然后我准确地输入了他所做的事情。我在视频中多次返回，试图弄清楚我是否遗漏了什么。

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

我试着改变一些数字，并查看 ctx.lineTo 看看我是否做错了什么。当他创建这些形状并且他刚刚工作时，我在视频中来回走动。我确信我的代码与视频中创建六边形的代码相同。

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();
    }
  }
}

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

Answer 1

调用 closePath（这是一个 lineTo 在子路径中输入点，因此所有行到您得到的第一个点）并且 stroke 仅一次，在您的 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

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

How do I fix my hexagons that are showing as strange shape with ctx.lineTo in JavaScript?

javascript

canvas

polygon