7

假设我有这张图片：

在此处输入图像描述

我有这个二维数组tiles[]..并使用Image()函数...我怎么能使用（我认为是最好的方法？）for循环将每个图块添加到arraysotile[0]中，但是有很多被读取并用作Image()稍后的对象在 HTML5 画布上绘制？

4

2 回答 2

4

我会..

  • 算出这张图片有多少个瓦片宽和高
  • 将图像绘制到内存中的画布上，并使用上下文获取图像数据。
  • 循环遍历每个图块并对其进行子图像化，存储在一个数组中。

假设：

imageWidth, imageHeight, tileWidth, tileHeight

所有人都描述了他们的名字所暗示的内容，并且：

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

编辑：在imageObj.onload此处绘制图像时执行代码，drawImage() from origin (0,0) 

    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);
  }
于 2012-07-18T03:53:20.630 回答
0

好的，我在我的本地主机上做了这个：它至少应该给你一个基础。我认为您应该可以直接使用它，但您可能需要根据您的需要对其进行一些计算调整。我只是认为没有必要花时间来完善你的例子：

您显然必须将图像指向您自己的图像。

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var canvas = document.getElementById('fakeCanvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = '/theImage.png';
        var tiles = [];
        var  imageTileNumWidth = 23;
        var imageTileNumHeight = 21;

img.onload = function(){
  var imageWidth = img.width;
  var imageHeight = img.height;
  sndCanvasWidth = imageWidth/imageTileNumWidth;
  sndCanvasHeight = imageHeight/imageTileNumHeight;
  canvas.width = imageWidth;
  canvas.height = imageHeight;
  ctx.drawImage(img,0,0,imageWidth,imageHeight);
  var sndCanvas = document.getElementById('drawCanvas');
  sndCanvas.width=sndCanvasWidth;
  sndCanvas.height=sndCanvasHeight;
  var i=0;
  var j=0;
  var t=0;
    for(i=0;i<imageWidth;i+=sndCanvasWidth){
      for(j=0;j<imageHeight;j+=sndCanvasHeight){
            var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);     
            var ctx2 = sndCanvas.getContext("2d");
            ctx2.putImageData(myImageData,0,0);
            tiles.push(myImageData);  
      }
    }
};
    });
  </script>
</head>
  <body>
    <canvas id="fakeCanvas"></canvas>
    <canvas id="drawCanvas"></canvas>
  </body>
</html>
于 2012-07-18T06:45:01.973 回答