Ich arbeite an einem einfachen JavaScript-Spiel mit HTML5-Canvas. Es ist ein sehr typisches Game-Loop-Setup mit:

init () - Funktion, mit der Objekte initialisiert werden, die auf dem Spielfeld verwendet werden sollen. Dabei werden einige Start-X / Y-Positionen und ähnliche Setup-Aufgaben zufällig ausgewählt.draw () - Funktion zum Zeichnen aller Spielobjekte, einschließlich einiger einfacher Leinwandformen und einiger Bilder.setInterval zum Aufrufen von draw alle 25 Millisekunden

Während dieses Projekt gestartet wurde, hatte ich den setInterval-Aufruf am Ende der init () -Funktion. Sobald Sie die Seite geladen haben, wurde mit dem Zeichnen und Animieren begonnen, und alles funktionierte einwandfrei. Jetzt, da ich weiter vorne bin, möchte ich ein vollständig gefülltes, statisches Spielfeld beim Laden zeichnen und dann mit einem Knopf das Intervall der Hauptspielschleife starten. Daher habe ich am Ende von init () einen einzelnen Aufruf von draw () hinzugefügt. Dabei geht es darum, dass alle Zeichenflächenformen ordnungsgemäß gezeichnet werden, aber keines der Bilder auf der Zeichenfläche gerendert wird.

Sietu rendern wenn ich draw () ein paar mal laufen lasse, wie ...

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

... aber das kommt mir doof vor. Warum funktioniert ein einzelner Aufruf von draw () nicht? Ich habe die Objekte in den Konsolen von Chrome und Firefox protokolliert und alles an ihnen sieht gut aus. Sie verfügen bereits über die entsprechenden img src-Pfade und Start-X / Y-Werte, die übergeben werden können, um sie dem neuen Image () zuzuweisen, das erstellt und dann über meine canvas.2dcontext.drawImage () -Methode aufgerufen wird.

Ich teste dies in Chrome 6 und Firefox 3.6.10, und beide verwirren mich mit diesem Verhalten. In der Chrome-Konsole werden keine Fehler oder Probleme angezeigt. Wenn ich jedoch versuche, draw () nur einmal aufzurufen, gibt Firefox Folgendes aus:

uncaught Ausnahmefehler: [Ausnahme ... "Komponente hat Fehlercode zurückgegeben: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::http: // localhost / meine-spiel-url / :: drawItem :: line 317 "data: no]

Meine Google-Suche nach diesem Fehler deutet auf ein beschädigtes Bild hin, aber alle werden problemlos in Preview und Photoshop geöffnet.