如果我在画布上快速连续绘制很多画布，如何强制画布中的显示更新

Question

一个context.fillRect在一个循环中，浏览器似乎等到循环完成之前，任何图形显示（可能通过双缓冲）

有没有什么办法强制浏览器更新显示，要么显式或在每次抽签操作后隐含？

Answer 1

这不是因为任何双缓冲，你没有看到结果，而是因为Web浏览器中的JavaScript是单线程的。如果您同样在JavaScript中创建一个反复执行类似myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px";的单循环操作，您将会看到，在JavaScript完成执行之前，浏览器中的任何内容都不会发生明显变化 - 即使在几秒钟内）。

要在屏幕上绘制更改并查看结果，您需要使用setInterval或setTimeout将控制权返还给浏览器，但要求在将来的某个时间点运行代码。

例如，为了画一个新的随机，随机彩色矩形在画布上的15倍的第二：

var canvas = document.getElementsByTagName('canvas')[0]; 
var ctx = canvas.getContext('2d'); 
setInterval(function(){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    var r=Math.random()*255, g=Math.random()*255, b=Math.random()*255; 
    ctx.fillStyle = 'rgb('+r+','+g+','+b+')'; 
    var w=Math.random()*canvas.width,  h=Math.random()*canvas.height; 
    var x=Math.random()*(canvas.width-w), y=Math.random()*(canvas.height-h); 
    ctx.fillRect(x,y,w,h); 
},1000/15);