画布元素不更新

Question

我正在尝试可视化通过 2d 网格移动的强化代理。我使用画布编写了一个可视化代码，每次我的代理移动时，我都会尝试更新网格。我希望看到动画，但在代理完成所有这些动作并且我看到最终状态之前，我什么也看不到。如果我使用 Google Chrome 开发者工具逐步完成，那么我可以看到各个步骤。我不认为这是我的代码运行速度太快的问题，因为每一步都需要几秒钟。

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

每次调用该函数时，您只会看到棋盘末端的玩家，而您不会看到中间的任何动画，因为循环运行得太快了。这就是为什么在我的现场演示中，我以小增量进行，每 15 毫秒调用一次绘图，这样您就有机会真正看到画布上的内容。