Question

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

Answer 1

您可以使用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);
    }
}

请注意，drawImage方法的第一个参数可以是Image对象或Canvas对象。

这是使用canvas drawImage方法的一个很好的参考。 https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Answer 2

听起来你问的是几件事，所以我会尝试解决一些问题。听起来你想要：

定义图块或图像的区域被绘制
定义地图，一组瓷砖特定订单
定义一个系统以将地图绘制到 <canvas>

只是为了踢，我开发了一些使用JavaScript和<canvas>完成上述三件事的东西。 The source can be found here。 请注意：此代码非常粗糙/原始，需要使用现代浏览器（Chrome 6 +，Opera 11等）。

在示例中：

Tiles被定义为一个简单的JavaScript对象：{ x: 0, y: 0, w: 0, h: 0 }。瓷砖被分组为一个名为TileData的对象，它只是一组瓷砖及其源图像。
地图实际上只是一大堆数字，与TileData对象中的索引相对应。
绘制地图是MapRenderer的责任，它会查找每个图块的矩形并将其绘制到<canvas>。

这应该让你开始。

使用带有画布的tileset

2 个答案: