3

我正在尝试用 JavaScript 和 HTML5 编写我的第一个游戏，但我被卡住了。我只想将图像绘制到已设置背景图像的 HTML 画布中，但图像仍然被放大并且位置也不好，我不知道为什么。让我们展示我的代码。

在正文中的 HTML 文件中，我只有画布#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 回答