Question

我试图在图像上选择不同的部分，每个部分我都需要获得坐标（我已经确定了保存单个响应坐标并且我很开心！）事情就是在做多个圈子的时候，我迷失了3件事。

首先，我需要用糟糕的实现循环来填充我的盒子，我似乎无法找到原因＆＃34;我＆＃34;点击后不会改变...

第二个按钮，使我的循环回到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()" >

Answer 1

啊，我已经完成了第一部分了！

现在它在5个盒子之间循环，我现在编程一个撤销按钮，我不知道该怎么做......如果我做了那么我会更新

我刚刚更改了以下几行：

var d =＆＃34; canvas1_NewVar＆＃34 ;;

 var i = 1;



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

};

我创建了一个重新加载页面的按钮...有一些东西可以回到一步但是我需要删除画布中的点，擦除框上的值并返回1 ＆＃34; I＆＃34;价值......这似乎是努力的方法O_o

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

麻烦制作图像热图多个答案

1 个答案: