鼠标点击比较的坐标

coordinates from mouseclick comparison

本文关键字：坐标 比较 鼠标      更新时间：2023-09-26

链接查看代码1.下面的代码在html5画布上画了一个圆圈，并添加了一个事件监听器来获取鼠标点击。圆圈内的鼠标点击与圆圈外的鼠标点击无法区分。

     <body>
     <canvas id="canvas" onclick="handleEvent()"></canvas>
     </body>
      body{
      background: #3e3e3e;
       }
      #canvas{
     background:white;
     height: 400px;
     width: 400px;
     border: 2px solid yellow;
       }

      window.onload=function(){
      var canvas=document.getElementById('canvas');
      var ctx=canvas.getContext('2d');
      var cx=canvas.width/2;
      var cy=canvas.height/2;
      var r=20;
       //circle draw function
      ctx.beginPath();
      ctx.arc(cx,cy,r,0,2*Math.PI,false);
      ctx.stroke();
       }
      //function to get mouse click coordinates
      function handleEvent(e)
      {
        var evt = e ? e:window.event;
        var clickX=0, clickY=0;
       if (evt.pageX || evt.pageY)
       {
         clickX = evt.pageX;
         clickY = evt.pageY;
        }
       if(180<evt.pageX<220)
        {
         alert("you are inside the circle");
        }
       alert (evt.type.toUpperCase() + ' mouse event:'
       +''n pageX = ' + clickX
       +''n pageY = ' + clickY 
        )
       return false;
       }

现有代码的几个陷阱:

注意你的"圆"是垂直拉伸的。这是因为画布的默认大小是300px宽150px高。当你使用CSS将其大小设置为400x400时，画布会不成比例地拉伸。为了避免这种情况，要么在canvas标签中设置画布大小，要么在javascript中而不是在CSS中设置。

// in html 
<canvas id="canvas" width="400px" height="400px"></canvas>
// in javascript (do this before any drawing)
var canvas=document.getElementById(“canvas”);
canvas.width=400;
canvas.height=400;

因为你正在测试一个在画布坐标(而不是窗口坐标)中生成的圆，你必须在画布坐标中获得鼠标点击的位置。这需要两个步骤。

首先，获取画布相对于窗口的位置

var canvas=document.getElementById("canvas");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;

第二，当处理鼠标点击时，你可以像这样获得鼠标相对画布的位置:

var evt = e ? e:window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;

这是你的命中测试的一个更好的版本。这里使用毕达哥拉斯定理来查看鼠标点击是否在圆的半径内:

var dx=cx-clickX;
var dy=cy-clickY;
if( dx*dx+dy*dy <= r*r )
{
  alert("you are inside the circle");
}

(可选)这里是如何使用javascript监听画布中的点击事件:

canvas.addEventListener("click",handleEvent);

(可选)你可以看看jQuery，它是一个可靠的，优秀的库，可以处理跨浏览器的差异，所以你不必这样做:

var evt = e ? e:window.event;

下面是代码和提示:http://jsfiddle.net/m1erickson/zLzwU/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{
      background: #3e3e3e;
    }
    #canvas{
      background:white;
      border: 2px solid yellow;
    }    
</style>
<script>
window.onload=function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;
    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var r=20;
    ctx.beginPath();
    ctx.arc(cx,cy,r,0,2*Math.PI,false);
    ctx.closePath();
    ctx.stroke();
    function handleEvent(e){
        var evt = e ? e:window.event;
        clickX = evt.clientX-offsetX;
        clickY = evt.clientY-offsetY;
        var dx=cx-clickX;
        var dy=cy-clickY;
        if( dx*dx+dy*dy <= r*r )
        {
          alert("you are inside the circle");
        }
        return false;
    }
    canvas.addEventListener("click",handleEvent);

}; // end init;
</script>
</head>
<body>
    <canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>
相关文章：