html5 drawImageはchromeではなくfirefoxで動作します

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キャンバスを同等にサポートしていると言うことから、なぜそれがクロームで動作しないのかについてのアイデアはありますか？

Answer 1

はcontext.drawImage(...)の代わりにこの書き込みをしてみてください：

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