JavaScript - putImageData不会绘制每个tile

Question

似乎某些瓷砖不会被绘制。我将一个tileset拆分为32x32正方形，并使用2D 100x100数组将地图绘制到画布上。

然后它为玩家设置“视口”。由于它是一张大地图，玩家总是以边缘为中心，除非它们靠近边缘。

然而，这导致绘制地图时出现问题。红色块是“玩家”

我发现的一些事情是，更高的视口（15x10）将能够绘制以前未绘制的一些瓷砖。

这是代码。您可以下载tileset以在jsFiddle http://mystikrpg.com/images/all_tiles.png

上的localhost或更低版本上进行测试

以下所有内容都有很好的评论。

即使更改视口，我确实会看到某些切片，而不是全部。     http://pastebin.com/cBTum1aQ

这是 jsFiddle ：http://jsfiddle.net/weHXU/

Answer 1

<强> Working Demo

基本上我采用了不同的方法绘制瓷砖。使用putImageData和getImageData可能会导致性能问题，也可以通过在开始时预先分配所有图像数据来引发内存惩罚。您已经拥有了图像形式的数据，您可能只需直接引用它，它实际上应该更快。

继承我使用的方法

 for (y = 0; y <= vHeight; y++) {
     for (x = 0; x <= vWidth; x++) {
         theX = x * 32;
         theY = y * 32;

         var tile = (board[y+vY][x+vX]-1),
             tileY = Math.floor(tile/tilesX),
             tileX = Math.floor(tile%tilesX);

          context.drawImage(imageObj, tileX*tileWidth, tileY*tileHeight, tileWidth, tileHeight, theX, theY, tileWidth, tileHeight);
    }
}

它的几乎相同，但我只是引用已加载图像的区域，而不是查看已保存数据的数组。

获取引用图块的说明

假设我有一个4x4的网格，我需要得到第7个区块，以获得y我会做7/4，然后得到x我将使用其余的7/4（7 mod 4）。

至于原始问题..我真的不知道是什么原因造成了丢失的瓷砖，我只是把它更改为我的方法，所以我可以从那里测试，但它可以立即为我工作。