キャンバス・アニメーションは前のフレームを再描画し続けます

Question

これは現在のところ不健全な時間を費やしていますが、私はこのバグを発見しませんでした。 JavaScriptでシンプルなHTML Canvasアニメーションを作成しました。今のところ私は小さな四角形が動くことを期待しています。ここでは（私もbabeljsを使用しています）のコードです：

class Pod { 
    constructor(x,y) {   
    this.posX = x; 
    this.posY = y; 
    this.velX = getRandomNumber(-5,5); 
    this.velY = getRandomNumber(-5,5);  
    } 

    getPos() { 
    return ([this.posX,this.posY]); 
    } 

    move() { 
    this.posX += this.velX; 
    this.posY += this.velY; 
    } 

    render() {  
    ctx.save(); 
    ctx.rect(this.posX,this.posY,3,3); 
    ctx.fillStyle = "#ffffff"; 
    ctx.fill(); 
    ctx.restore(); 
    } 
} 
/*the classes end here*/ 

var canvas = document.getElementById('canvas') 
var ctx = canvas.getContext('2d'); 

var elementsNum = 10; 

const stack = new Array(elementsNum); 

for(var i = 0; i < elementsNum; i++) { 
    stack[i] = new Pod(getRandomNumber(0,500),getRandomNumber(0,500)); 
} 


function run() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = "#000000"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
    ctx = canvas.getContext('2d'); 
    for(var i = 0; i < elementsNum; i++) { 
    stack[i].move(); 
    stack[i].render(); 
    } 
    //window.requestAnimationFrame(run); 
} 


/*helper functions*/ 
function getRandomNumber(min, max) { 
    return Math.random() * (max - min) + min; 
} 

機能実行のサイクルを実行した後は、（）、小さな四角が描画されます（私はポッドのそれらと呼ばれます）。次のサイクルは、ctx.clearRect ...でキャンバスをクリアすることから始まります。コンテキストをリセットしてから、ポッドをスタックから移動して描画します。最初のポッドを描画すると、すべてのフレームと前のフレームが描画されます。ここで

は、この特定のスクリプトのcodepenです：http://codepen.io/erikputz/pen/YNNXqX

（あなたが実行（）関数を呼び出すためにコンソールを使用する必要があるので、私は故意に、requestAnimationFrameのコメント）

がために前方ありがとうあなたの助け。

Answer 1

http://codepen.io/zfrisch/pen/bgazyO

これはあなたの問題を解決する必要があります。

render() {  

ctx.beginPath(); 
ctx.rect(this.posX,this.posY,3,3); 
ctx.fillStyle = "#ffffff"; 
ctx.fill(); 
ctx.closePath(); 

} 

あなたはbeginPathとclosePath方法を使用してコードを個々の形状を特定するために必要なキャンバスで。特定の方法では、これはfillRectのように生得的です。あなたはちょうどあなたがそれ以外の場合は、最も可能性の高い原因の問題だろう、それが閉じているときにパスが始まるとタイミングを指定する必要があります（rect）形状を宣言しているとき

render() {  
ctx.fillStyle = "#ffffff"; 
ctx.fillRect(this.posX,this.posY,3,3); 
} 

：したがって、上記のコードは、さらにそれ以上に単純化することができ元のコードにあった形の出血のようなものです。

また、キャンバス要素を平行移動/拡大/回転/移動する場合を除き、ヒントとして、.save()/.restore()を保存する必要はありません。塗りつぶしの形は適用されません。