Question

所以这是我的代码。我不知道为什么圆圈没有移动。它只是停留在我说的x和y坐标为的地方。

class Circle {
constructor(x, y, r, clr) {
this.radius = r;
this.x = x;
this.y = y;
this.clr = clr;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
ctx.fillStyle = this.clr;
ctx.fill();
ctx.closePath();
}

move(finalx, finaly) {
  this.finalx = finalx;
  this.finaly = finaly;

  while (this.finalx != this.x && this.finaly != this.y) {
    this.x += 2;
    this.y += 2;
 }

}
}

var x = new Circle(150, 225, 50, black);
x.move(400, 25);

Answer 1

每次更新后都需要重绘画布。你可能想要这样的东西：

class Circle {
    constructor(x, y, r, clr) {
        this.radius = r;
        this.x = x;
        this.y = y;
        this.clr = clr;
        draw();
    }

    move(finalx, finaly) {
      this.finalx = finalx;
      this.finaly = finaly;

      while (this.finalx != this.x && this.finaly != this.y) {
        this.x += 2;
        this.y += 2;
        draw();
      }
    }

    draw() {
        ctx.clearRect(0, 0, 500, 500); // Enter your specific dimensions
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
        ctx.fillStyle = this.clr;
        ctx.fill();
        ctx.closePath();
    }
}

无法在画布html上移动圆圈？

1 个答案: