坐标从鼠标点击比较
问题描述:
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;
}
答
一些陷阱与您现有的代码:你的“圈子”被垂直拉伸
通知。这是因为画布的默认大小是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>