HTML5 画布游戏的图块集
我正在尝试在 HTML5 画布中制作游戏，但我不想上传大量图像，而是只想上传一张包含所有图块的图像。问题是，我不知道如何只显示图像的一部分。基本上我想对这张图片执行 Google 所做的操作： http://www.google.com /images/srpr/nav_logo27.png 固定高度/宽度图块除外。有人可以向我解释如何做到这一点吗？另外，如果画布中的内容与没有画布的常规 html 页面不同，我将如何在画布中做到这一点？
I'm trying to make a game in HTML5 canvas, but instead of uploading a ton of images I want to just upload one image that has all of the tiles on it. The problem is, I don't know how to make only one part of the image show up. Basically I want to do what Google does with this image: http://www.google.com/images/srpr/nav_logo27.png except with fixed height/width tiles. Can someone explain to me how to do this? Also, if it's different in canvas than in a regular html page without canvas, how would I do it in canvas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
可以使用
drawImage的切片参数sx，sy：待切片部分的左上偏移sWidth、sHeight：待切片部分的尺寸dx、dy：要在画布上渲染的图像的左侧和顶部偏移量、dWidth、dHeight：画布上的图像尺寸更多信息位于：使用图像 - 切片 （MDC）
You can use the slicing parameters of
drawImagesx,sy: left and top offset of the part to be slicedsWidth,sHeight: dimensions of the part to be sliceddx,dy: left and top offset for the image on the canvas to be rendered atdWidth,dHeight: image dimensions on the canvasMore info at: Using images - Slicing (MDC)
看看 SpriteJS https://github.com/batiste/sprite。 js/blob/master/sprite.js 那里的工作是基于从单张图片绘制精灵时的偏移量。
Take a look at SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js there the work is based on offset at the moment of drawing the sprite from a single picture.
这就是我使用 GWT 的方法：
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5
This is how I do it with GWT:
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5