HTML5キャンバス画像クリッピング

Question

キャンバスタイルセット画像があります。私はHTML5のキャンバスの上にタイルセットをクリップする方法

を10タイルリターン9の場合は最初のタイルの戻り0、をクリックして...と...場合のような何かをする方法 http://i947.photobucket.com/albums/ad320/kev1030_photos/btiles2032.png

？

Answer 1

ここでクリップは正しい単語ではありません。クリッピングは、画像またはパスの一部だけを画面に描画する場合です。

「ヒットテスト」、「オブジェクトピッキング」、「セル検出」と呼ばれます。

これは単なる計算です。各アイコンは、あなたがどのセルを見つけるために、これを行うことができますので、32 + 2の黄色です：

can.addEventListener('mousedown', function(e) { 
    var mouse = getMouse(e, can); 
    var x = Math.floor(mouse.x/34); 
    var y = Math.floor(mouse.y/34); 
    alert(x + (y*16)); // because there are 16 in a row 
}, false); 

ここで働い例です：

http://jsfiddle.net/YH8b8/