canvas htmlでサークルを移動できませんか？

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