我正在编写一个由多个图层组成的基于瓷砖的游戏。但是,当我绘制地图并尝试通过 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 对其进行缩放以放大时,上面的图块会出现边框。如果我在同一画布上绘制所有内容,则不会发生这种情况。但我需要多张画布才能在墙后“走”等。
有人可以解释我如何摆脱它吗?
先感谢您!