Leinwand drawImage nicht zeichnen Bilder nicht das erste Mal

Question

Ich bin auf einem einfachen JavaScript-Spiel arbeiten HTML5-Canvas verwendet wird. Es ist eine sehr typische Spiel-Loop-Einrichtung beteiligt: ​​

• init() Funktion, die Objekte initialisiert, um das Spielfeld verwendet werden, einige Aufgaben x/y-Positionen und ähnliche Setup
• draw() Funktion starten Randomisierung, die alle zieht die Spielobjekte, darunter auch einige einfache Leinwand Formen und ein paar Bilder
• setInterval rufen alle 25 Millisekunden

zeichnen Während immer dieses Projekt begann, habe ich den setInterval Anruf am Ende der init() Funktion hatte, also würde es sofort anfangen zu zeichnen und zu animieren als du die Seite geladen hast, und alles hat gut funktioniert. Jetzt, wo ich weiter bin, möchte ich ein voll gefülltes, statisches Spielfeld beim Laden zeichnen und dann eine Taste benutzen, um das Hauptspiel-Intervall zu starten. So habe ich einen einzigen Anruf() am Ende von init zu ziehen(), und das Problem ist, dass, wenn ich dies tun, werden alle Formen Leinwand richtig hineingezogen, aber keines der Bilder machen auf der Leinwand.

Sie tun machen, wenn ich zeichne() lassen ein paar Mal laufen, wie ...

var previewDraw = setInterval(draw, 25); 
    var stopPreviewDraw = function() { clearInterval(previewDraw) } 
    setTimeout(stopPreviewDraw, 100) 

... aber das scheint stumm. Warum funktioniert ein einzelner Aufruf von draw() nicht? Ich habe die Objekte in den Konsolen von Chrome und Firefox eingeloggt und alles an ihnen sieht gut aus; sie haben bereits die entsprechenden src Pfade img und starten Sie x/y-Werte zur Verfügung passieren, um das neue Bild() zuzuweisen, die erstellt wird und dann über meine canvas.2dcontext.drawImage() -Methode aufgerufen.

Ich teste diese in Chrome 6 und Firefox 3.6.10, wie ich gehe, und sie sind beide mich mit diesem Verhalten rätselhaft. Keine Fehler oder Probleme zeigen in Chrome-Konsole, aber wenn ich versuche, ruft draw() nur einmal die Firefox diese werfen:

abgefangene Ausnahme: [Exception ... „Component zurückgegeben Fehlercode: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D. drawImage]“nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" Ort: "JS Rahmen :: http://localhost/my-game-url/ :: DrawItem :: Linie 317" Daten: no]

Mein Google für diesen Fehler sucht deuten auf eine korrupte Bild, aber sie alle öffnen in Vorschau und Photoshop ohne Probleme.

Answer 1

Ich nehme an, Sie rufen init() nach dem Onload-Ereignis des Fensterobjekts ausgelöst wird. Das Problem ist, dass Sie nicht garantieren können, dass die Bilddaten zu diesem Zeitpunkt tatsächlich verfügbar sind. AFAIR würde ausgelöst werden, nachdem die Bilder aus dem Netzwerk abgerufen wurden, aber dann müssen sie noch entschlüsselt werden.

Ihre beste Wette wäre, für die statt onload Ereignis Bilder zu warten.