HTML5 Canvas 绘制图块集答案

【问题标题】：HTML5 Canvas draw tilesetHTML5 Canvas 绘制图块集
【发布时间】：2012-03-10 12:28:33
【问题描述】：

就像我有图块集：

0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14, 15, 16,
17, 18, 19, 20

我的tileset绘制代码：

var image = new Image();
image.src = '32x32.png';
var tile = 5;
var tileSize = 32;
var x = 100;
var y = 100;
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);

这段代码绘制了“5”块，但是类似于如何绘制 10 个块？或 15 块不添加 tileX、tileY。我需要类似 if tile 等于 15 - 绘制 15 tile 的东西。

对不起，我的英语不好。

谢谢！

【问题讨论】：

标签： javascript html html5-canvas tiles

【解决方案1】：

将这些 tilset 坐标放入（多维）数组中，这样您就可以遍历数据并显示结果。这意味着如果有 10 个项目，您的代码将遍历所有 10 个项目。如果有 15 个，那很好，它将遍历所有 15 个。

当然，如果您通过使用 for 循环并将结束条件指定为“i

如果我还没有完全理解你，请告诉我。下面是我为我的一个项目创建的用于绘制瓷砖的函数示例。它可能会为您提供一些关于您正在尝试做什么的线索。

function renderMap(ctx, mapObj)
{
var rgt = mapObj.data();        

for (matrixY in rgt) {
    for (matrixX in rgt[matrixY]) {

        var matrixArray = rgt[matrixY][matrixX].split(',');

        var x = matrixArray[0];
        var y = matrixArray[1];

        var sx = (x-1) * mapObj.tileWidth();
        var sy = (y-1) * mapObj.tileHeight();

        var dx = (matrixX) * mapObj.tileWidth();
        var dy = (matrixY) * mapObj.tileHeight();

        ctx.drawImage(mapObj.mapTilesImg(), sx, sy, mapObj.tileWidth(), mapObj.tileHeight(), dx, dy, mapObj.tileWidth(), mapObj.tileHeight());
    }
}
}

以及使用的数据（轨道对象的一部分）：

    rgt: [  ['1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7'],
            ['1,2', '2,1', '4,4', '2,1', '2,4', '2,1', '2,1', '2,2'],   
            ['3,4', '4,5', '1,7', '1,7', '4,13', '1,7', '1,7', '1,4'],
            ['4,3', '1,7', '3,7', '1,7', '1,7', '1,2', '2,1', '2,6'],
            ['1,1', '1,15', '1,7', '1,7', '2,7', '1,4', '1,7', '1,7'],
            ['1,6', '2,1', '2,1', '2,4', '4,1', '2,6', '1,7', '1,7']
        ]

我使用了坐标。例如。 '1,7' = 1 横，7 在我的精灵表上。

【讨论】：