html5 drawImage在firefox中运行,而不是chrome

Question

我刚刚开始涉足HTML5/Javascript,目前正在尝试组建一个简单的二十一点游戏.我的主浏览器是Chrome,我注意到我的卡片绘图功能无效.我简化了代码,但drawImage()函数似乎仍然没有在屏幕上放置任何东西.

$(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上运行的任何想法？

Answer 1

尝试写而不是context.drawImage(...)这个:

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