圖像繪製爲HTML5 Canvas在第一次加載時無法正確顯示

Question

我正在學習關於在HTML5畫布上導入和顯示圖像的教程。一切工作正常，直到我試圖改變圖像本身。例如，我將有一個黃色圓圈作爲我的圖像，並且腳本正常工作。但是如果我在Paint中自己打開圖像並將圓圈更改爲紅色並刷新頁面，則直到我再次單擊或手動再次刷新時，該圓圈纔會顯示。以下是我正在使用的代碼片段：

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

該圓形可能不會顯示，因爲您正在加載圖像之前繪製它。改變你的最後聲明：

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

它的工作原理，你擊中後刷新是因爲圖像是現在預加載到緩存中的原因。

在試圖繪製它們之前，您總是希望等待任何圖像加載，否則畫布上不會顯示任何圖像。