解决方法
这不是真的因为没有看到结果的任何双重缓冲,而是因为Web浏览器中的
JavaScript是单线程的.如果您同样在JavaScript中创建一个循环,重复执行像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,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);
