Bricket cho trò chơi canvas HTML5

Question

Tôi đang cố gắng tạo một trò chơi trong canvas HTML5, nhưng thay vì tải lên một tấn hình ảnh tôi muốn tải lên một hình ảnh có tất cả các hình xếp trên đó. Vấn đề là, tôi không biết làm thế nào để làm cho chỉ một phần của hình ảnh hiển thị. Về cơ bản, tôi muốn làm những gì Google thực hiện với hình ảnh này: http://www.google.com/images/srpr/nav_logo27.png ngoại trừ các ô chiều cao/chiều rộng cố định. Ai đó có thể giải thích cho tôi làm thế nào để làm điều này? Ngoài ra, nếu nó khác nhau trong canvas so với trong một trang html thông thường không có canvas, tôi sẽ làm như thế nào trong canvas?

Answer 1

Bạn có thể sử dụng các thông số cắt của drawImage

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

• sx, sy: trái và đầu bù đắp của phần được thái lát
• sWidth, sHeight: kích thước của một phần để được cắt lát
• dx, dy: trái và đầu bù đắp cho hình ảnh trên vải để được trả lại tại
• dWidth, dHeight: kích thước hình ảnh trên vải

Thông tin thêm tại địa chỉ: Using images - Slicing (MDC)

Answer 2

Hãy xem SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js ở đó công việc dựa trên độ lệch tại thời điểm vẽ hình ảnh từ một ảnh duy nhất.

Answer 3

Đây là cách tôi làm điều đó với GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5