2013-04-28 224 views
0

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; 

     } 

回答

1

一些陷阱與您現有的代碼:你的「圈子」被垂直拉伸

通知。這是因爲畫布的默認大小是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>