Juego de fichas para HTML5 canvas

Question

Estoy tratando de crear un juego en el lienzo HTML5, pero en lugar de cargar una tonelada de imágenes solo quiero subir una imagen que tenga todas las fichas en ella. El problema es que no sé cómo mostrar solo una parte de la imagen. Básicamente, quiero hacer lo que Google hace con esta imagen: http://www.google.com/images/srpr/nav_logo27.png excepto con mosaicos de altura/ancho fijos. ¿Puede alguien explicarme cómo hacer esto? Además, si es diferente en el lienzo que en una página html normal sin lienzo, ¿cómo lo haría en lienzo?

Answer 1

Puede utilizar los parámetros de loncheado de drawImage

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

• sx, sy: izquierda y arriba compensado de la pieza a cortar
• sWidth, sHeight: dimensiones del parte para ser rebanada
• dx, dy: a la izquierda y el desplazamiento de la imagen en el lienzo superior a prestarse en
• dWidth, dHeight: dimensiones de imagen en el lienzo

Más información en: Using images - Slicing (MDC)

Answer 2

Eche un vistazo a SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js allí el trabajo se basa en el desplazamiento en el momento de dibujar el sprite desde una sola imagen.

Answer 3

Así es como lo hago con GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5