如果我在画布上快速连续地绘制很多东西,比如在一个循环中使用context.fillRect,浏览器似乎会等到循环完成后才显示任何绘制内容(可能是通过双缓冲实现的)。
有没有办法在每次绘制操作之后明确或隐式地强制浏览器更新显示?
有没有办法在每次绘制操作之后明确或隐式地强制浏览器更新显示?
myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px";
的单一循环,即使经过多秒钟,直到JavaScript执行完毕,浏览器上也不会有任何可见变化。setInterval
或setTimeout
将控制权交还给浏览器,但要求在将来某个时间运行代码。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);
为了获得更好的浏览器行为,最好使用{{link1:window.requestAnimationFrame()
}}。
requestAnimationFrame
几乎不存在。你的回答有点过时了,可以这么说。 - DDomen