如何在畫布中添加可點擊區域

我有一個畫布，並在其上繪製了一些圖像，但是如何將畫布分組到不同的組中，以便能夠點擊並運行一個功能（類似於區域標記）（我是編程新手）。使用區域標籤，您只能將其用於圖像，但您如何將區域標籤與畫布本身連接起來。如何在畫布中添加可點擊區域

<!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答案適用於確定我已經測試並保證它的工作原理。似乎還有一些其他的解決方案，也已經upvoted，也許你可以嘗試一下，無論是

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

所以這是同方的情況下，你有4頂點至極是第一個論點。然後給出x座標[10, 20, 10, 20]和y [30, 30, 40, 40]，並檢查點擊的點(5px, 25px)是否在正方形內。

所以你可以修改任何具有儘可能多的頂點的形狀。

來源

2016-11-13 13:47:51

即時通訊對不起，我不明白代碼你會介意解釋嗎？對不起 – Unknwon

@Unknwon肯定看到版 –

如何在畫布中添加可點擊區域

回答

相關問題