javascript - 多层 Canvas HTML5

Question

我正在编写一个包含多个图层的基于图 block 的游戏。但是，当我绘制 map 并尝试通过 CSS 缩放 Canvas 时，我发现上层的图 block 有边框，这不是故意的。绘制瓷砖的代码如下所示:

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);
        };
    };

代码所做的基本上是创建一个随机 map ，由两种图 block 组成:岩石和草地。岩石 block 绘制在下层 Canvas 上，草 block 绘制在上层 Canvas 上。当要绘制的瓷砖是一 block 岩石时，它会将其 passable 属性设置为 false。所以我的问题，正如已经提到的，是当我通过 css 缩放它以放大时，上面的图 block 有一个边框。如果我在同一 Canvas 上绘制所有内容，则不会发生这种情况。但是我需要多个 Canvas 才能在墙后等处“行走”。

谁能告诉我如何摆脱它？

提前致谢!

Answer 1

这是由于子像素。

默认像素以半像素偏移绘制，因此当您使用 CSS 缩放 Canvas 时(实际上将其缩放为图像)，此子像素化变得更加明显。

如果您需要使用 CSS，您可以尝试在绘制图 block 之前翻译您的 Canvas :

ctx.translate(-0.5, -0.5);

通常，使用 CSS 缩放 Canvas 并不是一个好主意。相反，请查看上下文方法 scale() 是否可以在您绘制图 block 之前帮助解决或调整图 block 的大小(如果速度很重要，请缓存新的大小)。