javascript - 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);
}