Zeichnen aufeinanderfolgender Frames zu einem HTML5 Canvas zeigt nur das letzte Frame

Question

Ich habe diese komplizierte Schleife, die verschiedene Standbilder von dem, was ich in einem Canvas-Element anzeigen möchte, berechnet. Jedes Mal, wenn der Rahmen berechnet wird, wird er angezeigt, ich rufe einen Timer an und warte bis ich ihn lösche und dann werden die nächsten Rahmen angezeigt und so weiter.

drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx); 
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx); 

    var date = new Date(); 
    var curDate = null; 

    do { 
     curDate = new Date(); 
    } 
    while (curDate - date < 550); 

    if (alone.length > 0) { 
     canvasx.width = canvasx.width; 
    } 

wenn ich einen Haltepunkt in var Datum Spiel setzen, und drücken Sie jedes Mal spielen, bekommt jeder einzelner Frame angezeigt, aber wenn ich es durch die Leinwand laufen lassen ist leer, während es läuft und am Ende zeigt es die letzte Rahmen.

jetzt, wenn ich die canvasx.width = canvasx.width; löschen, bekomme ich immer noch das gleiche Verhalten nur offensichtlich am Ende bekomme ich alle Frames übereinander gezeichnet.

Offensichtlich ist es keine Animation, also kann ich Zeichnung in einem setinterval nicht nennen.

hat jemand eine Idee warum;

Answer 1

Sie habensetTimeout statt Ihrer Schleife zu verwenden.

// JavaScript is single thread, and this BLOCKS the re-rendering and display of the canvas 
do { 
    curDate = new Date(); 
} 
while (curDate - date < 550); 

auch eher context.clearRect verwenden Ich würde (siehe MDC) anstelle der Redimensionierung, gibt es keinen Unterschied in der Leistung überhaupt.

Etwas in dieser Richtung sollte es tun:

function drawCanvas() { 
    if (alone.length > 0) { 
     // clear canvas 
    } 
    drawing(transform(alone, Box, canvasx.width, canvasx.height), false, "00f", canvasx); 
    drawing(transform(Lines, Box, canvasx.width, canvasx.height), false, "ff0000", canvasx); 
    setTimeout(drawCanvas, 550); 
} 

Versuchen Sie niemals sleep in JavaScript emulieren werden Sie den ganzen Browser blockieren alles zu tun, während Sie sleeping sind.