2

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

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“像素”。

4

1 回答 1

2

我想我有解决办法。看起来您在 19 像素的精灵上设置了 32 像素，用于暗图像。因此，如果您执行以下操作，它应该可以正常工作。（下载了您的文件并在本地进行了测试，并且可以正常工作）。

ctx.drawImage(dark, 19, 0, 19, 19, 0, 0, 608, 608);
于 2013-08-08T20:55:10.867 回答