javascript - 在 HTML5 canvas 中不负责任地传播图像

Question

我正在尝试用 JavaScript 和 HTML5 编写我的第一款游戏，但我被卡住了。我只想在设置了 background-image 的 HTML canvas 中绘制图像，但图像仍然被放大并且位置不佳，我不知道为什么。让我们展示我的代码。

在 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

我发现，当我删除 Canvas 的 css 属性宽度和高度设置时，它会正确绘制图像，但 Canvas 只有根据浏览器的默认大小。 -> 2.result

我完全糊涂了。

Answer 1

您正在使用 CSS 设置 Canvas 的大小。这只会将默认的 300x150 大小的 Canvas 放大到您使用 CSS 设置的大小(就像它是图像一样)(此外，要使 CSS 使用 0 以外的其他值，您需要指定一个单位 - 但暂时忽略它).

您需要使用 Canvas 属性(属性)width 和 height 明确设置大小。

canvas[0].width = 704;   // no unit required for the attributes
canvas[0].height = 672;