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中工作，不是铬

回答

相关问题