在 HTML5 画布中不负责任的传播图像答案

【问题标题】：Unaccountable spreading image in HTML5 canvas在 HTML5 画布中不负责任的传播图像
【发布时间】：2013-11-21 01:40:21
【问题描述】：

我正在尝试用 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.result

我完全糊涂了。

【问题讨论】：

尝试将player1.src移动到player.onload下方
是的..我不这么认为，但我在谷歌上搜索并看到其他例子是这样的。我真的不认为这会是问题，但为了大便和笑容，我提到了它

标签： javascript css html canvas

【解决方案1】：

您正在使用 CSS 来设置画布的大小。这只会将默认的 300x150 大小的画布放大到您使用 CSS 设置的大小（就像它是图像一样）（此外，为了让 CSS 使用除 0 以外的其他值，您需要指定一个单位 - 但暂时忽略这一点)。

您需要使用画布属性（属性）width 和 height 显式设置大小。

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

【讨论】：