이미지 히트 맵을 여러 번 만들 때 문제가 발생했습니다.

Question

각 섹션마다 다른 섹션을 선택하려고합니다. 좌표를 가져와야합니다 (단 하나의 응답 좌표가 저장되어있어 행복!) 것은 여러 가지 원을 할 때 나는 3 가지에서 길을 잃는다.

먼저 난 그냥 "내가"클릭에 변경되지 않는 이유를 찾을 수 없습니다 내 상자 thorugh cicle 나의 나쁜 구현 루프 ... 내 루프를 돌아 오기

두 번째 버튼이 필요합니다 0은

나는 내 질문에 내가 생각 조회 너무 특정 지점에 도착했습니다 ... 더 이상 배치 할 수 있습니다 5 원 이상

세 번째 캔버스에 원을 지 웁니다? :(그냥 자바 스크립트로 시작하고 있습니다 ... 제발 도와주세요,

여기 내 피들 덕분에 모든 도움을 주셔서 감사합니다.이게 도움이된다면 거기에 대한 답을 하나 남겼습니다. = 3

http://plnkr.co/edit/ja9fNtOyd8lzH6BekDpo?p=preview

<div id="Click">Seleccione las áreas de la imagen que más le gustan </div> 
<br><br><br><br><br><br><br> 
<img src="http://i332.photobucket.com/albums/m340/carlospatino21/megaman-5.jpg" alt="" border="0" id="mmc"> 
<style> 
    #myCanvas 
    { 
    position: absolute; 
    left: 0px; 
    top: 30px; 
    background-color: transparent; 
    opacity:0.5; 
    border-style: dotted;; 
    max-width:295px; 
    max-height:337px; 
    width: auto; 
    height: auto; 
    display: block; 


    } 

    #mmc 
    { 
    position: absolute; 
    left: 0px; 
    top: 30px; 
    z-index: 0; 
    display: block; 
    max-width:295px; 
    max-height:337px; 
    width: auto; 
    height: auto; 

    } 
    #Click 
    { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 1; 

    } 

</style> 




    <canvas id="myCanvas" width="295px" height="337px" onclick="evt2()" ></canvas> 


    <script> 
    function writeMessage(canvas, message) { 
      var context = canvas.getContext('2d'); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
      context.font = '15pt Calibri'; 
      context.fillStyle = 'black'; 
      context.fillText(message, 10, 25);} 

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
     } 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     canvas.addEventListener('click', function(evt) { 
     var mousePos = getMousePos(canvas, evt); 
     var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; 


    var centerX = event.clientX ; 
    var centerY = event.clientY - 30 ; 

    context.beginPath(); 
    context.arc(centerX, centerY,20,0, 2 * Math.PI); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = '#003300'; 
    context.stroke(); 

     }, false); 

//function evt2(){ 
//document.getElementById("canvas1_NewVar1").value = event.clientX + ',' + (event.clientY-30);} 

var d = "canvas1_NewVar"; 


for (var i = 1; i < 5; i++) 
    onclick = (function(){return function evt2() { 
document.getElementById(d+i).value = event.clientX + ',' + (event.clientY-30) 
};})(i); 





    </script> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<input id="canvas1_NewVar1" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar2" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar3" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar4" type="text" size="20" class="puntos" onclick="evt2()" > 
<input id="canvas1_NewVar5" type="text" size="20" class="puntos" onclick="evt2()" > 

Answer 1

AHM 잘 나는 첫 번째 부분을 가지고있어!

을 이제 5 개 상자 사이 그 사이클, 내가 지금은 아무 생각이 실행 취소 버튼을 프로그램 할 수 있습니다 하는 법 ... 내가 그것을 만들면 나는 업데이트 할 것이다

방금 ​​다음 행을 변경했습니다.

var d = "canvas1_NewVar";

var i = 1; 



function evt2() { 
document.getElementById(d+i).value = event.clientX + ',' + (event.clientY-30) 
; 
i += 1; 

}; 

나는 그것을 한 단계 뒤로 이동하는 무언가를 가지고 좋지 않을까 ... 페이지를 다시로드 버튼을 생성하지만, 캔버스에 점을 제거 상자에 값을 지우고 다시 갈 필요가 "i"값에 대한 1 개의 포지션 ... 하드로가는 것 같습니다. O_o

<input type="button" value="Corregir puntos" onClick="window.location.reload()">