wie zu zwingen, ein display-update in Leinwand

wenn ich zeichnen auf den canvas-Bereich eine Menge in schneller Abfolge, z.B. ein Kontext.fillRect in einer Schleife, Browser scheinen zu warten, bis die Schleife beendet wurde, bevor die Zeichnung angezeigt wird (eventuell via double-buffering)

Gibt es eine Möglichkeit zu zwingen, den browser, um die Anzeige zu aktualisieren, entweder explizit oder implizit nach jeder Ziehung Betrieb?

InformationsquelleAutor James Tauber | 2011-02-13

  1. 15

    Ist es nicht wirklich, weil der double-buffering, dass Sie nicht die Ergebnisse sehen, aber eher, weil JavaScript im web-browser single-threaded. Wenn Sie in ähnlicher Weise erstellen Sie eine einzelne Schleife in JavaScript, dass immer wieder so etwas macht wie myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px"; Sie werden sehen, dass nichts sichtbar ändern in den browser—auch über viele Sekunden, bis Sie Ihre JavaScript-Ausführung beendet hat.

    Zeichnen Sie die änderungen und sehen die Ergebnisse auf dem Bildschirm, die Sie verwenden müssen setInterval oder setTimeout Ausbeute Kontrolle an den browser zurück, bitten aber um code auszuführen, der irgendwann in der Zukunft.

    Beispielsweise zum zeichnen einer neuen, zufällig, zufällig farbige Rechteck auf den canvas 15-mal in einer Sekunde:

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

    InformationsquelleAutor Phrogz

Schreibe einen Kommentar