Obraz narysowany na płótnie HTML5 nie wyświetla się poprawnie przy pierwszym załadowaniu.

Question

Podążam za samouczkiem dotyczącym importowania i wyświetlania obrazów na płótnie HTML5. Wszystko działa dobrze, dopóki nie spróbuję zmienić samego obrazu. Na przykład, będę mieć żółte kółko jako mój obraz, a skrypt działa dobrze. Ale jeśli sam otworzę obraz w programie Paint i zmieniłem okrąg na czerwony, a odświeżę stronę, kółko nie pojawi się, dopóki nie kliknę lub nie odświeżę po raz drugi ręcznie. Oto fragment kodu używam:

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

Krąg prawdopodobnie nie wyświetlają się, ponieważ jesteś rysowanie go przed obraz jest załadowany. Zmień ostatnie zdanie na:

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

Powodem, dla którego działa po odświeżeniu, jest to, że obraz jest teraz wstępnie załadowany do pamięci podręcznej.

Zawsze chcesz poczekać na załadowanie wszystkich obrazów, zanim spróbujesz je narysować, albo nic nie pojawi się na płótnie.