Как заставить обновление дисплея в холсте

если я рисую на холст много в быстрой последовательности, например. context.fillRect в цикле, браузеры, кажется, ждут, пока цикл не завершится, пока не отобразится какой-либо чертеж (возможно, с помощью двойной буферизации)

Можно ли заставить браузер обновлять отображение, явно или неявно после каждой операции рисования?

ОТВЕТЫ

Ответ 1

На самом деле, из-за отсутствия двойной буферизации вы не видите результатов, а потому, что 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);