html5キャンバスで円を移動する

Question

私は、drawCircle関数を使ってhtml5キャンバス（this.ctx）上に円を描画しています。今度はCircle関数を使ってcirlceを別の位置に移動したいと思います。サークルがある場所から別の場所に移動するのを見る方法はありますか？この時点では、ユーザーの前のサークルを削除する方法がわかりません。オブジェクトに弧を割り当てることができますか？

customobject.prototype.drawCircle = function drawCircle(userID, x, y) { 

var radius = 10; 
     this.ctx.beginPath(); 
     this.ctx.arc(100, 00, 10, 0, Math.PI*2, true); 
     this.ctx.closePath(); 
     this.ctx.fillStyle = 'blue'; 
     this.ctx.fill(); 
     this.ctx.lineWidth = 2; 
     this.ctx.strokeStyle = '#003300'; 
     this.ctx.stroke(); 
} 


customobject.prototype.moveCircle = function moveCircle(userID, x, y) { 

} 

私は潜在円（アニメーションではない - それを動かす）を削除する方法を参照しました： - でしょう。この場合には、私は、元の円の座標を指定しますので、>それ

remove circle(x, y, radius){ 
    this.ctx.globalCompositeOperation = 'destination-out' 
    this.ctx.arc(x, y, radius, 0, Math.PI*2, true); 
    this.ctx.fill(); 
} 

を切る？

私は円を動かして投稿するthisも見ました。しかし、私は複数のサークルでそれを行う方法を知らない。

Answer 1

描画されたキャンバスから円を削除することは先験的にはできません。その場所に背景色を設定して別の円を描画することはできますが、他の円と速く競合します描画オブジェクト。

私はこの権利を得ている場合、あなたは円の動きをアニメートしたいと思います。

var start = new Date().getTime(), 
    end = start + 1000; //one second of animation 
    p1 = { x: 0, y: 0 }, //start coordinates 
    p2 = { x: 100, y: 10 }; // end coordinates 


function render (progress) { 
    var x = p1.x + progress * (p2.x - p1.x), 
     y = p1.y + progress * (p2.y - p1.y); 

    clearCanvas(); 
    drawCircle(x,y); 
} 

function loop() { 
    var now = new Date().getTime(), 
     progress = (now - start)/(end - start); 

    if (progress >= 0 && progress <= 1) { 
    render(progress); 
    window.requestAnimationFrame(loop); 
    } 
} 

loop(); 

基礎：それは基本的にそのように行われている

1. あなたはアニメーションループなしforまたはwhileループ、タイマーを使用しています何か、setTimeout()またはsetInterval()はどうなる必要がありますが、requestAnimationFrame()そのようなもののために作られています。

2. アニメーションでは、これは通常0から1の間の数字で、0は開始を示し、1は終了を示し、進行の間のすべてを示します。

3. キャンバスをクリアし、進行状況に応じてすべてを再描画します。

4. 進行が1より大きいまで繰り返す。