Tileset für HTML5 Leinwand Spiel

Question

Ich versuche, ein Spiel in HTML5 Canvas zu machen, aber anstatt eine Tonne von Bildern hochzuladen, möchte ich nur ein Bild hochladen, das alle Kacheln darauf hat. Das Problem ist, ich weiß nicht, wie man nur einen Teil des Bildes erscheinen lässt. Grundsätzlich möchte ich tun, was Google mit diesem Bild tut: http://www.google.com/images/srpr/nav_logo27.png außer mit festen Höhe/Breite Fliesen. Kann mir jemand erklären, wie man das macht? Wenn es im Canvas anders ist als in einer normalen HTML-Seite ohne Canvas, wie würde ich es dann in Canvas machen?

Answer 1

können Sie die Slicing-Parameter von drawImage verwenden

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

• sx, sy: links und oben des Teils versetzt
in Scheiben geschnitten werden
• sWidth, sHeight: Abmessungen der Teil in Scheiben geschnitten
• dx, dy: bei
• dWidth, dHeight links und oben für das Bild auf der Leinwand versetzt gerendert wird: Abmessungen Bild auf der Leinwand

Mehr Infos unter: Using images - Slicing (MDC)

Answer 2

Werfen Sie einen Blick auf SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js dort die Arbeit basiert auf Offset zum Zeitpunkt des Zeichnens des Sprite aus einem einzigen Bild.

Answer 3

So mache ich es mit GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5