3

初めてのゲームを JavaScript と HTML5 で書こうとしていますが、行き詰っています。background-image が設定されている HTML キャンバスにのみ画像を描画したいのですが、画像はまだ拡大されており、さらに位置が悪いため、理由がわかりません。私のコードを示しましょう。

body の HTML ファイルには、canvas #gameCanvas しかありません。

これが JavaSript コードです。

function prepare()
{
    var canvas = $('#gameCanvas');
    var context = canvas[0].getContext('2d');

    $('#wrapper').css({"width": "704"});

    canvas.css({"width": "704",
        "height": "672",
        "backgroundImage": "url(./images/map.png)"});

    var player1 = new Image();
    player1.src = "./images/player1.png";
    player1.onload = function() {
        context.drawImage(player1, 0, 0, 26, 36, 100, 100, 26, 36);
    };
}

$(function(){
    prepare();
})

そして、それは私の奇妙な結果です - > 1.result

cssプロパティの幅とキャンバスの高さの設定を削除すると、画像は正しく描画されますが、キャンバスにはブラウザに応じたデフォルトのサイズしかありません。-> 2.結果

私は完全に混乱しています。

4

1 に答える 1

1

CSS を使用してキャンバスのサイズを設定しています。これは、デフォルトの 300x150 サイズのキャンバスを、CSS で設定したサイズ (画像の場合と同様) に拡大するだけです (さらに、CSS が 0 以外の値で動作するようにするには、単位を指定する必要がありますが、これはしばらく無視してください。 ）。

widthキャンバス プロパティ (属性)とを使用して、サイズを明示的に設定する必要がありますheight。

canvas[0].width = 704;   // no unit required for the attributes
canvas[0].height = 672;
于 2013-11-08T22:37:32.213 に答える