麻煩製作圖像熱圖多個答案

我想在圖像上選擇不同的部分，每個部分我需要獲取座標（我已儘可能geting一個單一的響應座標保存，我是開心！）的事情是當做多個圈子我失去了3件事情。麻煩製作圖像熱圖多個答案

首先，我需要我的壞實現循環來cicle thorugh我的箱子我似乎無法找到爲什麼「我」不上單擊更改...

其次一個按鈕，得到我的環回0和擦除畫布

三不超過5個圈可以放在圓圈...

我有一個點，我的問題是太具體的研究，我認爲？ :(我剛剛開始在這裏的JavaScript ...請幫助我，

這是我的小提琴感謝您的所有幫助，如果這適用於你去爲它我離開了單答案響應那裏評論= 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()" >

來源

2016-12-15 Lolo

你的'onclick'事件不應該在你的for循環。有一個'onclick'事件並跟蹤'i'的值（每增加一次點擊或者你想處理它）來設置相應的輸入值 –

Ahm ...我認爲它不在for內。 ..但也許我不理解你....對不起... – Lolo

我無法編輯... LINE 1 for（var i = 1; i <5; i ++） LINE 2 onclick =（function（）{return function evt2（）{document.getElementById（d + i）.value = event.clientX +'，'+（event.clientY-30） };}）（i）; – Lolo

AHM好，我已經得到了第一部分了！

現在的5盒之間它的週期，我現在就程序撤銷按鈕，我不知道怎麼辦...如果我做到了，那麼我會更新

我剛纔改了一行後：

var d =「canvas1_NewVar」;

var i = 1; 



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

};

我創建了一個按鈕，重新加載頁面...這將是真棒有東西要回去了一步，但我需要在畫布中刪除點，抹去包裝盒上的價值並返回1個位置上的「我」的價值...似乎很難O_o

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

來源

2016-12-15 22:18:55 Lolo

麻煩製作圖像熱圖多個答案

回答

相關問題