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

如果我很快地连续绘制画布.一个context.fillRect在一个循环中,浏览器似乎等待直到循环完成之前任何绘图显示(可能通过双缓冲)

有没有办法强制浏览器在每次绘制操作后显式或隐式地更新显示？

解决方法

这不是真的因为没有看到结果的任何双重缓冲,而是因为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,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);

原文地址：https://www.jb51.cc/html5/168671.html