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()是否可以在绘制图块之前帮助或调整图块大小（如果速度至关重要，则缓存新尺寸）。

多层画布HTML5

1 个答案: