通过鼠标拾取任意点并标识坐标，动态绘制该点与上一点坐标

最新推荐文章于 2022-03-03 17:29:00 发布

Anmi1416

最新推荐文章于 2022-03-03 17:29:00 发布

阅读量389

点赞数 1

分类专栏： JS 文章标签：鼠标

本文链接：https://blog.csdn.net/Anmi1416/article/details/79572102

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <style type="text/css">
  html,body{
    margin: 0;
    padding: 0;
  }
    #dot1,#dot2{
      display:none;
      position: fixed;
      border:1px solid red;
    }
  </style>
</head>
<body>
  <div id = "dot1"></div>
  <div id = "dot2"></div>
    <canvas id="canvas" width="1000px" height="700px">
    </canvas>
<script type="text/javascript">
  var x1,y1,x2,y2;
    window.onclick=function(event){
      var currentX = event.clientX;
      var currentY = event.clientY;
      if(x1 == undefined){
        var a = currentX;
        var b = currentY;
        x1 = a;
        y1 = b;
        document.getElementById('dot1').style.top = y1 + 'px';
        document.getElementById('dot1').style.left = x1 + 'px';
        document.getElementById('dot1').style.display = 'block';
        alert("该点坐标为："+ x1 +"，"+y1);
      }else{
        if(x2 == undefined){
          x2 = currentX;
          y2 = currentY;
          alert("该点坐标为："+ currentX +"，"+currentX);
        }else{
          x1 = x2;
          y1 = y2;
          x2 = currentX;
          y2 = currentY;
          document.getElementById('dot1').style.top = y1 + 'px';
          document.getElementById('dot1').style.left = x1 + 'px';
          document.getElementById('dot1').style.display = 'block';
          alert("该点坐标为："+ currentX +"，"+currentX);
        }
        line =Math.pow(eval(x2-x1)*eval(x2-x1)+eval(y2-y1)*eval(y2-y1),0.5).toFixed(2);
        document.getElementById('dot2').style.top = y2 + 'px';
        document.getElementById('dot2').style.left = x2 + 'px';
        document.getElementById('dot2').style.display = 'block';
        var canvas = document.getElementById('canvas');
        canvas.height = canvas.height;
        var context = canvas.getContext('2d');
        context.moveTo(x1,y1);
        context.lineTo(currentX,currentY);
        context.lineWidth = 2;
        context.strokeStyle = "#000";
        context.stroke();
        alert("两点间的距离为"+line);

      }
    };
  </script>
</body>
</html>