Javascript 使用带有画布的平铺集

是的，所以我一开始就迷路了。好吧，假设我有一个2D自上而下RPG游戏的大图像和每个磁贴。它们的宽度和所有东西都一样。我不知道的是，如何将该图像中的每个瓷砖保存到它们自己的图像数据中，以便在画布上使用？基本上，我想用我所有的瓷砖拍摄一个大图像，在整个图像中选择正方形，用瓷砖制作图像，并将每个图像作为一个变量存储在一个数组中。那么，我该怎么做呢？

您可以使用canvas drawImage方法将每个瓷砖绘制到新画布上

// assume your big source canvas is called tileSource
var tileWidth = 64;
var tileHeight = 64;
var tileCols = Math.round(tileSource.width/tileWidth);
var tileRows = Math.rounc(tileSource.height/tileHeight);

// array to store canvas elements
var myTiles = [];

// loop through for each tile in the source
for (var i=0; i<tileRows; i++) {
    for (var j=0; j<tileColumns; j++) {
        // This is using jQuery to create the canvas element
        // .get(0) gets the actual canvas element from the jQuery object
        var tile = $('<canvas height="' + tileHeight + '" width="' + tileWidth + '"></canvas>').get(0);
        
        // draw the tile from the source
        tile.context.drawImage(tileSource, j*tileWidth, i*tileHeight, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight);
        
        // add tile to array
        myTiles.push(tile);
    }
}

//假设您的大型源画布称为tileSource
var tileWidth=64；
var tileHeight=64；
var tileCols=数学圆（tileSource.width/tileWidth）；
var tileRows=Math.rounc（tileSource.height/tileHeight）；
//数组来存储画布元素
var myTiles=[]；
//对源中的每个磁贴进行循环
对于（var i=0；i，听起来你在问几个问题，所以我将尝试解决几个问题。听起来你想：

将图像的平铺或区域定义为
被吸引
定义一个地图，一组图块
特定顺序
定义一个系统以将地图绘制到

为了好玩，我使用JavaScript和
开发了一款可以完成上述三件事的软件。需要注意的是：这段代码相当粗糙/粗糙，需要使用现代浏览器（Chrome 6+、Opera 11等）

在示例中：


tile被定义为一个简单的JavaScript对象：
{x:0，y:0，w:0，h:0}
。tile被分组到一个名为
TileData
的对象中，该对象只是一组tile及其源图像
地图实际上只是一个大的数字数组，对应于
TileData
对象中的索引
绘制地图是
maprederer
的职责，它查找每个磁贴的矩形并将其绘制到一个
中

这应该让你开始