javascript - JS、 Canvas - ctx.drawImage() 不工作

Question

我正在使用 JavaScript 和 HTML5 制作游戏，目前正在尝试在 Canvas 上绘制夜间图像以使 Angular 落变暗。一行代码完美无误地绘制了一幅图像，但在接下来的代码中，似乎什么也没有发生。图像确实已加载 - 我可以将其作为普通图像元素附加到正文中:

function renderViewport() {
    console.log("rendering...");
    ctx.clearRect(0, 0, 608, 608);
    var xpos = 0;
    var ypos = 0;
    var n;
    for (var x = charX - 9; x <= charX + 9; x++) {
        if (x >= 0 && x < xs) {
            for (var y = charY - 9; y <= charY + 9; y++) {
                if (y >= 0 && y < ys) {
                    n = x * xs + y;
                    sprite = backSprites[n];
                    ctx.drawImage(terrain, sprite, 0, 32, 32, xpos, ypos, 32, 32);
                }
                ypos += 32;
            }
        }
        ypos = 0;
        xpos += 32;
    }
    var sprite = getYou();
    ctx.drawImage(you, sprite, 0, 32, 32, 288, 288, 32, 32);
    ctx.drawImage(dark, 32, 0, 32, 32, 0, 0, 608, 608);
}

因此，倒数第二行将“你”准确地画在了我想要的位置和方式，但最后一行什么也没做。如果有任何帮助，我将不胜感激，如果需要，我可以提供示例，谢谢。

示例:http://students.challoners.com/ts/jspg_0.2/
您可以在/textures/dark01.png 找到“深色”图像

我忘了说我正在尝试同时放大图像，而游戏的大小为 19x19 32x32“像素”。

Answer 1

我想我有解决办法。看起来你在 19px Sprite 上设置 32px，用于深色图像。因此，如果您执行以下操作，它应该可以正常工作。 (下载您的文件并在本地进行测试，它有效)。

ctx.drawImage(dark, 19, 0, 19, 19, 0, 0, 608, 608);