cómo forzar una actualización de pantalla en lienzo

Question

si dibujo mucho en el lienzo en rápida sucesión, p. a context.fillRect en un bucle, los navegadores parecen esperar hasta que el ciclo haya finalizado antes de que se muestre alguno de los dibujos (posiblemente mediante doble almacenamiento en búfer)

¿Hay alguna manera de forzar al navegador para que actualice la pantalla, explícitamente? o implícitamente después de cada operación de sorteo?

Answer 1

No es realmente debido a cualquier doble almacenamiento en búfer que no ve los resultados, sino más bien porque JavaScript en el navegador web es de un solo hilo. Si de manera similar crea un bucle único en JavaScript que hace algo repetidamente como myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px";, verá que nada cambiará visiblemente en el navegador, incluso durante muchos segundos, hasta que su JavaScript haya terminado de ejecutarse.

Para dibujar los cambios y ver los resultados en la pantalla, debe usar setInterval o setTimeout para devolver el control al navegador, pero solicite ejecutar el código en algún momento en el futuro.

Por ejemplo, para dibujar un rectángulo nuevo aleatoria, al azar de color en el lienzo de 15 veces por segundo:

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