坐标从鼠标点击比较

link for the code 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; 

     }

来源

2013-04-28 Abhishek Jain

一些陷阱与您现有的代码：你的“圈子”被垂直拉伸

通知。这是因为画布的默认大小是300px宽和150px高。当您使用CSS将其大小设置为400x400时，画布不成比例地伸展。为了避免这种情况，可以在画布标签或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>

来源

2013-04-28 15:54:12 markE

坐标从鼠标点击比较

回答

相关问题