캔버스에서 클릭 가능한 영역을 추가하는 방법

캔버스가 있고 이미지를 그렸지만 캔버스를 다른 그룹으로 그룹화하여 어떻게 클릭하여 함수를 실행할 수 있습니까 (지역 태그와 유사) (나는 프로그래밍에 익숙하지 않다.) 영역 태그는 이미지 용으로 만 사용할 수 있지만 영역 태그를 캔버스 자체와 어떻게 연결합니까? 여기에서캔버스에서 클릭 가능한 영역을 추가하는 방법

<!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 대답은 내가 테스트를했는데 작동을 보장 확실히 작동합니다. 그것도

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

그래서이 광장의 경우와는 4 정점이있다 느릅 나무가있다, 어쩌면 당신이 그들을 시도 할 수 upvoted되어 너무 다른 솔루션이 있다는 것을 보인다 첫 번째 인수. 그런 다음 x 좌표 [10, 20, 10, 20]과 y [30, 30, 40, 40]을 입력하고 클릭 한 점 (5px, 25px)이 사각형 내에 있는지 확인합니다.

그래서 많은 정점이있는 모든 도형에 대해 수정할 수 있습니다.

출처

2016-11-13 13:47:51

죄송합니다. 코드를 이해 하시겠습니까? 죄송합니다. – Unknwon

@Unknwon 판을 확인하십시오. –

캔버스에서 클릭 가능한 영역을 추가하는 방법

답변

관련 문제