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

Answer 2

在2019年，您可以使用Chrome开发工具https://www.html5rocks.com/en/tutorials/canvas/inspection/

进行跟踪

如何在画布中强制显示更新

2 个答案: