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/