画布元素不更新

我试图通过2D网格看到增强剂。我使用画布编写了一个可视化文件，每次我的代理人都会尝试更新网格。我希望看到一个动画，但直到代理完成所有这些动作，我才看到什么，我看到最后的状态。如果我使用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(); 
    } 
}

来源

2011-12-23 zenna

即使代码需要很长的时间来执行，直到有代码的实际断裂浏览器将不会更新显示。只要希望画布更新，使用setTimeout()就会导致代码执行中断。

来源

2011-12-23 05:58:19

谢谢，但我不确定如何使用此工作。在我的执行动作函数中，我用setTimeout替换了绘图代码（draw，15）。但是似乎draw函数在15毫秒后不会被调用，而是在主代码执行完毕后（即与之前相同的问题），它们全部被调用。此外，绘图代码取决于代理的状态，我怎么能确定这个状态如果被调用的顺序不符？ – zenna

'[执行代码绘制第一帧] [等待] [执行代码绘制第二帧] [等待]等等......前一帧需要在绘制下一帧的函数上使用'setTimeout'。如果你的代码不是通过框架设置的，那么你需要改变它。 –

你不会看动画，因为它们发生得太快。你需要像下面的例子那样分解它们。

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毫秒调用一次绘图，以便您有机会真正看到画布上放置了什么。

来源

2011-12-23 06:19:31 Loktar

谢谢，但正如我在我的问题中所说，我不认为这是我的代码要快（因为他们是重大的计算发生在每个循环）。相反，我认为主循环以某种方式阻止了屏幕的更新。我试图用setTimeout解决这个问题，但没有成功，正如我在上面的回答中所述。谢谢 – zenna

@zenna为了让别人帮助你将不得不看到更多的代码或例子。只是让你知道，但是在循环中，你将永远不会*看到画布的更新，除非你打破它，在for循环中你将永远不会*看到在for循环中发生的更新。 – Loktar

画布元素不更新

回答

相关问题