javascript-HTML5 Canvas Tileset绘图

就像我有tileet一样-http://flashpunk.net/img/tut/swordguy.png

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

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

现在需要在tile上设置tileX和tileY,但是如何只需要设置和绘制所有tileset中的tile呢?

像现在这样需要tileX = 3,tileY = 1,但我需要-tile = 8并绘制相同的tile.
‘http://flashpunk.net/img/tut/swordguyframes.png

怎么样做?

感谢您的帮助,对不起我的英语不好.

解决方法:

您知道连续有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/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。