html5 drawImage在firefox中工作，不是鉻

我剛剛開始涉足HTML5/Javascript，目前正試圖組裝一個簡單的二十一點遊戲。我的主要瀏覽器是Chrome，並且我注意到我的卡的繪圖功能不起作用。我簡化了代碼，但drawImage（）函數仍然沒有在屏幕上顯示任何內容。html5 drawImage在firefox中工作，不是鉻

$(document).ready(function(){ 
init(); 
}); 

function init(){ 
setCanvas(); 
} 

function setCanvas(){ 
var canvas = document.getElementById("game-canvas"); 
var context = canvas.getContext("2d"); 
canvas.width = 800 
canvas.height = 600 
context.fillStyle = "#004F10"; 
context.fillRect(0,0,800,600); 
var back = new Image(); 
back.src = "testermed.png" 
context.drawImage(back,54,83); 

}

現在，當我在Chrome上運行，我得到由上下文期但尚未領取的圖像繪製的框。但是，當我在Firefox中運行它時，圖像和框顯示得很好。從我所知道的Firefox和Chrome都同樣支持HTML5畫布;關於爲什麼它不適用於Chrome的任何想法？

來源

2012-09-12 Curlystraw

試着寫的，而不是context.drawImage(...)此：

back.onload = function() { 
    context.drawImage(back, 54, 83); 
}

來源

2012-09-12 11:43:05 micnic

+1，我正要回答相同 – Roman

你能否擴大的答案解釋*爲什麼*這能解決問題嗎？ –

這解決了問題，因爲您只分配圖像源。這只是給瀏覽器發送消息並開始檢索消息的消息。因此，當您嘗試繪製圖像時，圖像並不在瀏覽器中。 micnic做了什麼是他已經分配了負載處理程序，簡單的說就是，只有在圖像實際重新生成並且瀏覽器可用時才調用drawImage。 – Romin

html5 drawImage在firefox中工作，不是鉻

回答

相關問題