javascript - HTML5 Canvas Tileset 绘图

Question

像我这样的东西有tileset - http://flashpunk.net/img/tut/swordguy.png

我的绘图代码是 - http://jsfiddle.net/WnjB6/

但是如何做类似的事情 - drawTile(x, y, tile, width, height);

现在需要在 tile 上设置 tileX 和 tileY，但是如何只设置一个 tile 并从所有 tileset 中设置和绘制 tile？

现在需要 tileX = 3，tileY = 1，但我需要 - tile = 8 并绘制相同的图块。'http://flashpunk.net/img/tut/swordguyframes.png

如何做类似的事情？

感谢您的帮助，并为我糟糕的英语感到抱歉。

Answer 1

你知道一排有 6 个瓷砖，所以你可以这样做：

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

所以传入6将进入第二行的第一个图块，依此类推。

这是一个示例，它循环遍历所有图块：

http://jsfiddle.net/Jrjyq/