多层帆布HTML5

我正在编写一个基于tilebased的游戏，其中包含多个图层。但是，当我绘制地图并尝试通过CSS缩放画布时，我遇到了上层图块获得边框的事实，这不是预期的。绘制砖的代码如下所示：多层帆布HTML5

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

代码确实是basicly创建一个随机地图，由两个种类的瓷砖什么：摇滚和草。岩石砖被绘制在较低的画布上，而上部的草地砖被绘制。当要绘制的图块是岩石时，它的可通过属性设置为false。所以我的问题，正如已经提到的那样，当我通过css进行缩放以放大时，上方的瓷砖会得到边框。如果我在同一个画布上绘制所有内容，它不会发生。但我需要多个画布能够在墙壁后面“走路”等。

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

预先感谢您！

来源

2013-11-04 Mensur Grišević

不会使用css更改画布大小。 – ViliusL

你可以在jsfiddle上显示一个例子吗？这可能是一个浏览器相关的问题，因为我不能用FF重现它 – devnull69

这是由于子像素化。

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

你可以尝试绘制的瓷砖前，你的画布翻译，如果你需要使用CSS：

ctx.translate(-0.5, -0.5);

一般来说它不使用CSS扩展画布是一个好主意。取而代之的是看看上下文方法scale()是否可以在绘制图块之前帮助或调整图块的大小（如果速度很重要，请缓存新图块）。

来源

2013-11-06 07:17:17 K3N

回答

相关问题