HTML5'e çizilmiş resim İlk yükte tuval düzgün görüntülenmiyor

Question

HTML5 kanvasındaki görüntülerin içe aktarılması ve görüntülenmesi ile ilgili bir eğiticiyi takip ediyorum. Her şey iyi çalışıyor, ben görüntüyü değiştirmeye çalışana kadar. Örneğin, görüntümde sarı bir daire olacak ve komut dosyası düzgün çalışıyor. Ancak, resmin kendisini Paint'te açıp çemberi kırmızıya çevirip sayfayı yenilediğimde, sayfayı el ile ikinci kez tıklayıp tekrar yenileyinceye kadar daire görünmez. Görüntü yüklenmeden önce bunu çizim çünkü daire muhtemelen görünmüyor

var topMap = new Image(); 
topMap.src = "topMap.png"; 

function drawMap() { 
    context.clearRect(0, 0, WIDTH, HEIGHT); 
    context.drawImage(topMap, 0, 0); 
} 

function init() { 
    drawMap(); 
} 

init(); 

Answer 1

: İşte kullanıyorum kod parçacığı olduğunu.

// Lets not init until the image is actually done loading 
topMap.onload = function() { 
    init(); 
} 

görüntü şimdi önbelleğine önceden yüklenmiş olduğu için yenileme olduğunu vurmak sonra çalışır nedeni: için son deyimi değiştirin.

Resim çizmeye çalışmadan önce, her zaman resim yüklenmesini beklemek istersiniz veya bunun yerine tuvalde hiçbir şey görünmez.