8

私は最近、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で動作しない理由について何か考えはありますか?

4

1 に答える 1

18

これの代わりに書いてみてくださいcontext.drawImage(...)：

back.onload = function() {
    context.drawImage(back, 54, 83);
}
于 2012-09-12T11:43:05.663 に答える