多层画布 HTML5答案

【问题标题】：Multi Layer Canvas HTML5多层画布 HTML5
【发布时间】：2013-11-15 17:38:19
【问题描述】：

我正在编写一个由多个图层组成的基于图块的游戏。但是，当我绘制地图并尝试通过 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);
        };
    };

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

谁能解释我如何摆脱它？

提前谢谢你！

【问题讨论】：

不要使用 css 更改画布大小。
你能在 jsfiddle 上展示一个例子吗？这可能是与浏览器相关的问题，因为我无法像这样用 FF 重现它

标签： javascript css html canvas

【解决方案1】：

这是由于亚像素化。

默认像素是在半像素偏移处绘制的，因此当您使用 CSS 缩放画布（实际上将其缩放为图像）时，这种子像素会变得更加明显。

如果您需要使用 CSS，您可以在绘制图块之前尝试翻译您的画布：

ctx.translate(-0.5, -0.5);

通常，使用 CSS 缩放画布并不是一个好主意。而是查看上下文方法scale() 是否可以帮助您在绘制图块之前调整它们的大小（如果速度很重要，则缓存新大小）。

【讨论】：