canvas drawImage nie rysuje obrazów po raz pierwszy

Question

Pracuję nad prostą grą JavaScript za pomocą canvas HTML5. To bardzo typowa konfiguracja gry pętli udziałem:

• init() funkcja, która inicjuje przedmiotów do wykorzystania planszy, losowanie niektórzy zaczynają X/Y stanowiska i podobne zadania konfiguracyjne
• draw() Funkcja, która czerpie wszystko obiekty gry, w tym kilka prostych kształtów płótno i kilka obrazów
• setInterval zadzwonić narysować co 25 milisekund

Chociaż coraz to projekt rozpoczęty miałem setInterval wezwanie na końcu funkcji init() więc wkrótce zacznie się rysować i animować podczas ładowania strony i wszystko działało dobrze. Teraz, gdy jestem dalej, chciałbym narysować całkowicie wypełnione, statyczne pole gry przy obciążeniu, a następnie użyć przycisku, aby rozpocząć główny interwał pętli w grze. Dodałem więc jedno wywołanie funkcji draw() na końcu init(), a problem polega na tym, że kiedy to zrobię, wszystkie kształty canvas zostaną poprawnie narysowane, ale żaden z obrazów nie będzie renderowany na płótnie.

Robią renderowanie jeśli pozwolę wyciągnąć() uruchomić kilka razy, jak ...

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

... ale to wydaje się głupie. Dlaczego nie działa jedno wywołanie funkcji draw()? Zarchiwizowałem obiekty w konsolach Chrome i Firefoksa i wszystko na nich wygląda dobrze; mają już odpowiednie ścieżki img src i zaczynają dostępne wartości x/y do przekazania, aby przypisać nowe zdjęcie(), które zostanie utworzone, a następnie wywołane za pomocą mojej metody canvas.2dcontext.drawImage().

Testuję to w przeglądarce Chrome 6 i Firefox 3.6.10, a oni oboje zastanawiają mnie nad tym zachowaniem. Żadne błędy lub problemy pokazują w konsoli Chrome ale gdy próbuję wywołanie draw() tylko wtedy, gdy Firefox rzucić to:

nieprzechwycony wyjątek: [wyjątek ... „Component zwrócony kod błędu: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D. drawImage]”nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" Lokalizacja: "ramka JS :: http://localhost/my-game-url/ :: drawItem :: linia 317" dane: no]

My Google wyszukuje tego błędu sugerować uszkodzony obraz, ale wszystko otwarte w Preview i Photoshop bez żadnych problemów.

Answer 1

Zakładam, że wywołujesz init() po wywołaniu zdarzenia onload obiektu okna. Problem polega na tym, że nie gwarantuje to, że dane obrazu są rzeczywiście dostępne w tym momencie. AFAIR uruchomi się po pobraniu obrazów z sieci, ale nadal musi zostać zdekodowany.

Najlepszym wyjściem byłoby oczekiwanie na zdarzenie "onload" obrazów.