キャンバスでクリック可能な領域を追加する方法

私はキャンバスを使用していますが、キャンバスをいくつか描いていますが、どのようにキャンバスをクリックして別のグループにグループ化すればいいですか？（私はプログラミングに慣れていない）。エリアタグではイメージ用にしか使用できませんが、エリアタグをどのようにキャンバス自体に接続しますか？ここでキャンバスでクリック可能な領域を追加する方法

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="1024" height="479" usemap='Canvas'></canvas> 
    <script> 
     function loadImages(sources, callback) { 
     var images = {}; 
     var loadedImages = 0; 
     var numImages = 0; 
     // get num of sources 
     for(var src in sources) { 
      numImages++; 
     } 
     for(var src in sources) { 
      images[src] = new Image(); 
      images[src].onload = function() { 
      if(++loadedImages >= numImages) { 
       callback(images); 
      } 
      }; 
      images[src].src = sources[src]; 
     } 
     } 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     var sources = { 
     background: 'MANCALA-game_bg_combined3.png', 
     pit1marble1: 'MANCALA-game_marble.png', 
     pit1marble2: 'MANCALA-game_marble.png', 
     pit1marble3: 'MANCALA-game_marble.png', 
     pit1marble4: 'MANCALA-game_marble.png', 
     pit1marble5: 'MANCALA-game_marble.png', 
     pit1marble6: 'MANCALA-game_marble.png', 

     }; 

     loadImages(sources, function(images) { 
     context.drawImage(images.background, 0, 0, 1024, 479); 
     context.drawImage(images.pit1marble1, 200, 70, 50, 50); 
     context.drawImage(images.pit1marble2, 160, 85, 50, 50); 
     context.drawImage(images.pit1marble3, 175, 75, 50, 50); 
     context.drawImage(images.pit1marble4, 190, 80, 50, 50); 
     context.drawImage(images.pit1marble5, 200, 100, 50, 50); 
     context.drawImage(images.pit1marble6, 160, 100, 50, 50); 



     }); 

    </script> 
<map name="Canvas"> 

<area shape="rect" coords="172,50,269,176" href="sun.htm" alt="Sun" id=pit1> 
<area shape="rect" coords="286,50,383,176" href="sun.htm" alt="Sun" id=pit2> 
<area shape="rect" coords="400,50,497,176" href="sun.htm" alt="Sun" id=pit3> 
<area shape="rect" coords="528,50,625,176" href="sun.htm" alt="Sun" id=pit4> 
<area shape="rect" coords="651,50,748,176" href="sun.htm" alt="Sun" id=pit5> 
<area shape="rect" coords="757,50,864,176" href="sun.htm" alt="Sun" id=pit6> 

<area shape="rect" coords="172,58,269,166" href="sun.htm" alt="Sun"> 
<area shape="rect" coords="286,58,383,166" href="sun.htm" alt="Sun"> 
<area shape="rect" coords="400,58,497,166" href="sun.htm" alt="Sun"> 
<area shape="rect" coords="528,58,625,166" href="sun.htm" alt="Sun"> 
<area shape="rect" coords="651,58,748,166" href="sun.htm" alt="Sun"> 
<area shape="rect" coords="757,58,864,166" href="sun.htm" alt="Sun"> 
</map> 
    </body> 
</html>

出典

2016-11-13 Unknwon

チェック：

Javascript check Mouse clicked inside the Circle or Polygon

meouw答えは、私がテストしてきたし、それが動作を保証することを確認するために動作します。だから、これはあなたが4頂点がWICH持って四角の場合とされ

pnpoly(4, [10, 20, 10, 20], [30, 30, 40, 40], 5, 25)

のいずれか、多分あなたはそれを試すことができ、upvotedされていることも、いくつかの他のソリューションがあるようです最初の議論。次に、x座標[10, 20, 10, 20]とy [30, 30, 40, 40]を与え、クリックされたスポット(5px, 25px)が四角形内にあるかどうかを確認します。

これで、頂点の数が多いシェイプであれば、それを変更できます。

出典

2016-11-13 13:47:51

私は本当にコードを理解していませんが、あなたはそれを説明してもらえませんか？申し訳ありません – Unknwon

@Unknwonは、エディションを参照してください –

キャンバスでクリック可能な領域を追加する方法

答えて

関連する問題