html5 drawImage适用于firefox，而不是chrome

html5 drawImage works in firefox, not chrome

本文关键字：chrome drawImage 适用于 firefox html5      更新时间：2023-09-26

我最近刚刚开始涉足HTML5/Javascript，目前正在尝试制作一个简单的21点游戏。我的主要浏览器是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上不起作用的想法吗？

尝试写入而不是context.drawImage(...) this:

back.onload = function() {
    context.drawImage(back, 54, 83);
}
相关文章：