キャンバス要素が更新されない

Question

2次元グリッドを移動する補強エージェントを視覚化しようとしています。私はキャンバスを使用して視覚化をコーディングし、エージェントが移動するたびにグリッドを更新しようとします。私はアニメーションを見たいと思っていましたが、代わりにエージェントがこのすべての動作を完了して最終状態を見るまで何も見ません。 Google Chromesデベロッパーツールを使用すると、個別の手順を確認できます。私のコードが速く走っているのは問題ではないと思う。各ステップには数秒かかります。

私の実装は次のとおりです。gridWorld()は新しいオブジェクトを作成するために一度呼び出され、描画するたびに呼び出されるのはexecuteActionです。示されているように私はctx.save()とctx.restore()を使用しましたが、これはこの問題を解決するための試みにすぎず、違いはありませんでした。コードの実行に時間がかかる場合であっても、コードの実際のブレークがあるまで

おかげ

var execute gridWorld = function(action) { 
    var canvas = document.getElementById("grid"); 
    this.ctx = canvas.getContext("2d"); 

    this.executeAction = function(action) { 
     this.ctx.save() 
     // ... Do reinforcement learning stuff 
     // For every cell in grid, do: 
     this.ctx.fillStyle = "rgb(244,0,0)" 
     this.ctx.fillRect(positionX, poisitonY, 10,10) 

     this.ctx.restore(); 
    } 
} 

Answer 1

は、ブラウザの表示を更新しません。 setTimeout()を使用すると、キャンバスを更新するたびにコード実行が中断されます。

Answer 2

あなたはあまりにも速く起こっているので、アニメーションが見えません。あなたは次の例のようにそれらを分割する必要があります。

Live Demo

私は例

for(x = 0; x < 256; x++){ 
    player.x = x; 
    ctx.fillStyle = "#000"; 
    ctx.fillRect(0,0,256,256); 
    ctx.fillStyle = "#fff"; 
    ctx.fillRect(player.x,player.y,4,4); 
} 

のために、このような何かをした場合にのみ、これまでボードの最後にその関数が呼び出されるたびに選手を見るであろう、そしてあなたは「wouldnループが速すぎるため、その間のアニメーションが表示されません。それで私のライブデモでは少しずつ増やし、15ミリ秒ごとに描画を呼び出すので、実際に何がキャンバスに置かれているのかを実際に確認する機会があります。