5

HTML5 キャンバスでゲームを作成しようとしていますが、大量の画像をアップロードする代わりに、すべてのタイルを含む 1 つの画像をアップロードしたいだけです。問題は、画像の一部だけを表示する方法がわからないことです。基本的に、Google がこの画像で行うことをしたいと考えています: http://www.google.com/images/srpr/nav_logo27.png固定の高さ/幅のタイルを除きます。誰かがこれを行う方法を私に説明できますか? また、キャンバスがキャンバスのない通常の HTML ページと異なる場合、キャンバスでどのようにすればよいでしょうか?

4

3 に答える 3

13

のスライスパラメータを使用できますdrawImage

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

代替テキスト

  • sx、sy：スライスするパーツの左右のオフセット
  • sWidth、sHeight：スライスするパーツの寸法
  • dx、dy：でレンダリングされるキャンバス上の画像の左右のオフセット
  • dWidth、dHeight：キャンバス上の画像の寸法

詳細：画像の使用-スライス（MDC）

于 2010-12-12T09:06:50.237 に答える
0

これが私がGWTでそれを行う方法です： http ：//code.google.com/p/gwt-examples/wiki/gwt_hmtl5

于 2011-03-26T18:09:03.590 に答える
0

SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.jsを見てください。作業は、1 つの画像からスプライトを描画する瞬間のオフセットに基づいています。

于 2010-12-11T23:27:34.127 に答える