JavaScript - putImageData 不会绘制每个图 block

Question

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

然后它为播放器设置“视口(viewport)”。由于这是一张大 map ，玩家总是以边缘为中心，除非他们跑到边缘附近。

但是，这导致绘制 map 时出现问题。红色方 block 是“玩家”

我发现，更高的视口(viewport) (15x10) 将能够绘制一些以前未绘制的图 block 。

这是代码。您可以在 jsFiddle http://mystikrpg.com/images/all_tiles.png 上下载 tileset 以在本地主机或以下进行测试

下面的所有内容都得到了很好的评论。

即使更改视口(viewport)，我也看到绘制了一些 tile，不是全部。 http://pastebin.com/cBTum1aQ

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

Answer 1

Working Demo

基本上我采用了不同的方法来绘制图 block 。使用 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 号图 block ，以获得 y 我会做 7/4，然后获得 x我会使用 7/4 (7 mod 4) 的剩余部分。

至于最初的问题..我真的不知道是什么导致了瓷砖丢失，我只是将其更改为我的方法以便我可以从那里进行测试，但它立即对我有用。