Question

我试图想象一个在2d网格中移动的强化剂。我使用画布编写了一个可视化代码，每当我的代理人移动时，我都会尝试更新网格。我希望看到一个动画，但是直到代理人完成了所有这些动作并且我看到了最终状态，我什么都看不到。如果我单步使用Google Chromes Developer工具，那么我可以看到各个步骤。我不认为我的代码只是快速运行是一个问题，因为每一步都需要几秒钟。

我的实现如下，函数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

你不会看到动画，因为它们发生的速度太快了。您需要像以下示例中那样拆分它们。

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

每次调用该函数时，您都只会在棋盘的末尾看到播放器，并且您之间不会看到任何动画，因为循环运行得太快。这就是为什么在我的现场演示中我以小增量进行操作并且每15毫秒调用一次绘制，这样你就有机会真正看到什么被放在画布上。

Answer 2

即使代码需要很长时间才能执行，浏览器也不会更新显示，直到代码中出现实际中断为止。只要您希望更新画布，就可以使用setTimeout()导致代码执行中断。

画布元素不更新

2 个答案: