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

【问题标题】：how to force a display update in canvas如何在画布中强制显示更新
【发布时间】：2011-06-26 08:10:26
【问题描述】：

如果我在画布上快速连续绘制很多东西，例如循环中的 context.fillRect，浏览器似乎要等到循环完成后才会显示任何绘图（可能通过双缓冲）

有什么方法可以强制浏览器在每次绘制操作后显式或隐式更新显示？

【问题讨论】：

【解决方案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);

【讨论】：

【解决方案2】：

最好使用window.requestAnimationFrame() 以获得更好的浏览器行为。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
嗨@jjff55，您的回答很好，但考虑到这个问题是在 10 年前提出的，当时requestAnimationFrame 几乎不存在。你的答案只是一点点......我们说没时间了
回答老问题@DDomen 很好——甚至受到鼓励；我来到这里是因为即使是十年后，我也遇到了同样的问题，这是最好的结果之一。在这里拥有所有解决方案 - 新旧 - 很有用！
@MartinTournoij 谢谢你的观点，它让我再次检查了更好的 SO 政策。即使答案没有解决问题，而只是一小部分，但无论如何扩展它可能会更好（可能用户无法评论旧答案，因此扩展这个是有意义的）
哦，是的，它绝对太短/太模糊，不能成为一个好的答案@DDomen；我实际上无法从 MDN 页面弄清楚如何使它工作，而是使用了 setTimeout() 方法。