Tileset для HTML5 Canvas

Question

Я пытаюсь сделать игру на холсте HTML5, но вместо загрузки тонны изображений я хочу просто загрузить одно изображение, на котором есть все плитки. Проблема в том, что я не знаю, как заставить отображаться только одну часть изображения. В основном я хочу сделать то, что Google делает с этим изображением: 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: размеры изображения на холсте

Подробнее: Использование изображений - нарезка (MDC)

Answer 2

Вот как я это делаю с GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5

Answer 3

Посмотрите на SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js, там работа основана на смещении в момент рисования спрайта из одного изображения.