Question

我正在使用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像素。

Answer 1

我想我有解决方案。对于暗图像，看起来你在19px精灵上设置32px。因此，如果您执行以下操作，它应该可以正常工作。（下载了您的文件并在本地进行了测试，但它确实有效）。

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

JS，Canvas - ctx.drawImage（）不起作用

1 个答案: