HTML5畫布地形設置繪圖

Question

喜歡的東西我有地形設置 - http://flashpunk.net/img/tut/swordguy.png

我的繪製代碼 - http://jsfiddle.net/WnjB6/

但如何做這樣的事情 - drawTile（X，Y，瓷磚，寬，高）;

現在需要在tile上設置tileX和tileY，但是如何僅設置一個tile需要設置和繪製所有tileset中的tile？

像現在一樣需要tileX = 3，tileY = 1，但我需要 - 瓷磚= 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/