kanvas drawImage resim çizmiyor

Question

HTML5 kanvasını kullanarak basit bir JavaScript oyunu üzerinde çalışıyorum. Bazı x/y konumlarını ve benzeri kurulum görevlerini tüm çizer

beraberlik() fonksiyonu başlatmak randomizing,

• init() nesneleri başlatır playfield kullanılacak fonksiyonu: Bu içeren çok tipik oyun döngü düzmece Bu proje dokümanına ben init() fonksiyonunun sonunda setInterval çağrısını iken her 25 milisaniyede

çizmek aramaya

setInterval bazı basit tuval şekil ve birkaç görüntüler dahil oyun nesneler, bu yüzden sadece çizmeye ve animasyon yapmaya başlıyor Sayfayı yüklediğinizde ve her şey iyi çalıştı. Şimdi daha da uzağımdayım, yükte tam dolu, statik bir oyun alanı çizmek ve ana oyun döngü aralığını başlatmak için bir düğme kullanmak istiyorum. Bu yüzden, init() öğesinin sonunda draw() için tek bir çağrı ekledim ve sorun şu ki, bunu yaptığımda, tüm tuval şekilleri düzgün çizilir, ancak görüntülerin hiçbiri tuvalde işlenmez.

Onlar gibi bir kaç kez çalıştırın() çizmek izin verirsek hale yapmak ...

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

... ama o kadar aptal görünüyor. Neden tek bir çağrı yapmak için() çalışır? Nesneleri Chrome ve Firefox konsollarında kaydettim ve onlar hakkındaki her şey iyi görünüyor; zaten uygun img src yollarına sahipler ve x/y değerlerini başlatmak için kullanılabilecek yeni Image() 'e atamak ve sonra benim canvas.2dcontext.drawImage() yöntemini kullanarak çağırmak için kullanılabilir.

Bunu giderken Chrome 6 ve Firefox 3.6.10'da test ediyorum ve ikisi de bu davranışla beni şaşırtıyor. Herhangi bir hata veya sorunlar Chrome'un konsolunda göstermek ama Firefox bu atmak sadece bir kez berabere() çağırarak denerseniz:

yakalanmamış istisna: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D: [İstisna ... "Bileşen hata kodu döndürdü. drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" konum: "JS çerçeve :: http://localhost/my-game-url/ :: DrawItem :: hat 317" veriler: no] My Google o hata arar

bozuk bir resim önermek, ancak Hepsi önizleme ve Photoshop'ta sorunsuz açılır.

Answer 1

Pencere nesnesinin onload olayından sonra init() yöntemini çağırdığınızı varsayalım. Sorun şu ki, görüntü verilerinin bu noktada gerçekte kullanılabilir olduğunu garanti etmiyoruz. AFAIR, görüntüler ağdan alındıktan sonra ateşlenir, ancak yine de kodunun çözülmesi gerekir.

En iyi bahsiniz, bunun yerine görüntülerin yük olayını beklemek olabilir.