适用于HTML5帆布游戏的Tileset

Ano*_*ous 5 html javascript html5 image tile

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

gbl*_*zex 13

您可以使用切片参数 drawImage

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Run Code Online (Sandbox Code Playgroud)

替代文字

  • sx,sy:要切片的零件的左侧和顶部偏移
  • sWidth,sHeight:要切片的部分的尺寸
  • dx,dy:要渲染的画布上的图像的左和上偏移量
  • dWidth,dHeight:画布上的图像尺寸

有关更多信息,请参阅:使用图像 - 切片(MDC)