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

Question

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

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

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