适用于HTML5帆布游戏的Tileset

Question

我正在尝试用HTML5画布制作一款游戏，但我没有上传大量图片，只想上传一张包含所有图块的图片。问题是，我不知道如何只显示图像的一部分。基本上我想做谷歌用这张图片做的事情：http://www.google.com/images/srpr/nav_logo27.png除了固定的高/宽瓷砖。有人可以向我解释如何做到这一点？另外，如果它在画布上与没有画布的常规html页面不同，我将如何在画布中进行操作？

Answer 1

您可以使用drawImage

的切片参数

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• sx，sy：要切片的部分的左上角偏移
• sWidth，sHeight：要切片的部分的尺寸
• dx，dy：要在
处呈现的画布上的图像的左上角偏移量
• dWidth，dHeight：画布上的图片尺寸

更多信息： Using images - Slicing（MDC）

Answer 2

看看SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js那里的工作是基于从单张图片中绘制精灵时的偏移。

Answer 3

这是我用GWT做的方式： http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5