多层画布HTML5

Question

我正在编写一个由多个图层组成的基于图块的游戏。 但是，当我绘制地图并尝试通过CSS缩放画布时，我会遇到这样的事实，即上层的图块会获得边框，这不是故意的。 绘制图块的代码如下所示：

for (var key in Nodes) {
        var currentNode = Nodes[key];
        var tileProb = Math.floor(Math.random() * 10 + 1);

        if (tileProb < 2) {
            currentNode.passable = false;
            canvasLayerZero.drawImage(currentNode.img, 0, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim);
        }
        else {
            currentNode.passable = true;
            canvasLayerOne.drawImage(currentNode.img, 20, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim);
        };
    };

该代码的作用基本上是创建一个随机地图，该地图由两种类型的图块组成：Rock和Grass。 岩石瓷砖绘制在下部画布上，草瓷砖绘制在上部画布上。 当要绘制的图块是一块石头时，它的可通过属性设置为false。 因此，正如我已经提到的，我的问题是，当我通过CSS对其进行缩放以放大时，上面的图块会出现边框。 如果我在同一画布上绘制所有内容，则不会发生。 但是我需要多个画布才能在墙等中“行走”。

有人可以解释我如何摆脱它吗？

先感谢您！

Answer 1

这是由于子像素化。

默认情况下，像素以半像素的偏移量绘制，因此当您使用CSS缩放画布（实际上将其缩放为图像）时，此子像素变得更加可见。

如果需要使用CSS，可以在绘制图块之前尝试平移画布：

ctx.translate(-0.5, -0.5);

通常，使用CSS缩放画布不是一个好主意。 相反，请在绘制它们之前查看上下文方法scale()可以帮助平铺或调整其大小（如果速度必不可少，请缓存新的大小）。