html5 drawImage 在 Firefox 中工作，而不是 chrome答案

【问题标题】：html5 drawImage works in firefox, not chromehtml5 drawImage 在 Firefox 中工作，而不是 chrome
【发布时间】：2012-09-12 11:37:53
【问题描述】：

我最近刚刚开始涉足 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 上运行的任何想法？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

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

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

【讨论】：

您能否扩展答案以解释为什么这可以解决问题？
这解决了问题，因为您只是分配图像源。这只是给浏览器的一条消息，让浏览器开始检索消息。因此，当您尝试绘制图像时，浏览器并不真正存在图像。 micnic 所做的是他为它分配了加载处理程序，简单地说，这意味着只有在图像被实际重新检索并且浏览器可用时才调用 drawImage。
谢谢！这似乎工作得很好。也感谢您的解释 - 它总是有助于了解 为什么 事情有效！