JavaScript - 拆分要存储在2D Image()数组中的tileset图像

Question

假设我有这个图像:

我有这个2D数组tiles[]..并使用Image()函数...我怎么能使用(我认为最好的方法？)for循环将每个图块添加到array所以tile[0]通过然后很多有读取并用作Image()以后的对象在HTML5画布上绘制？

Answer 1

我会..

• 计算出该图像的宽度和高度有多少格
• 将图像绘制到内存中的画布上，并使用上下文来获取图像数据。
• 循环遍历每个图块并对每个图块进行子图像处理，并将其存储在数组中。

假设：

图像宽度、图像高度、图块宽度、图块高度

所有这些都描述了他们的名字所暗示的含义，并且：

编辑：根据评论添加图像加载，修复错误的名称ImageWidth和ImageHeightimageWidthimageHeight

编辑：imageObj.onload在此处绘制图像时执行内部代码，从原点 (0,0) 绘制 Image()

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "tilesetImageLocationHere";

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);

然后，将图像分割成平铺数据列表。

    var tilesX = imageWidth / tileWidth;
    var tilesY = imageHeight / tileHeight;
    var totalTiles = tilesX * tilesY;        
    var tileData = new Array();
    for(var i=0; i<tilesY; i++)
    {
      for(var j=0; j<tilesX; j++)
      {           
        // Store the image data of each tile in the array.
        tileData.push(ctx.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
      }
    }
    //From here you should be able to draw your images back into a canvas like so:
    ctx.putImageData(tileData[0], x, y);
  }