5

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

4

3 回答 3

13

您可以使用切片参数drawImage

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

替代文字

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

更多信息：使用图像 - 切片(MDC)

于 2010-12-12T09:06:50.237 回答
0

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

于 2010-12-11T23:27:34.127 回答
0

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

于 2011-03-26T18:09:03.590 回答