HTML5 Canvas Tileset绘图

Question

像我这样的东西 - 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并绘制相同的tile。 “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/