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

html5 drawImage在firefox中工作，而不是chrome

1 个答案: