좌표와 마우스 스크롤 비교

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

몇 개는 .. 원 외부 사람들과 구별 할 수 없습니다. 이는 캔버스의 기본 크기가 너비가 300 픽셀이고 높이가 150 픽셀이기 때문입니다. CSS를 사용하여 크기를 400x400으로 지정하면 캔버스가 너무 많이 늘어납니다. 이를 방지하려면 캔버스 크기를 캔버스 태그 또는 CSS가 아닌 javascript로 설정하십시오.

// 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;

당신이 히트 테스트되기 때문에 (창 좌표보다는) 캔버스 좌표에서 생성 된 원을, 당신은 캔버스에 마우스 클릭의 위치가 너무 좌표를 받아야합니다. 이것은 2 단계 프로세스입니다.

이 같은

첫째, 마우스 클릭을 처리 할 때 창

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;

인 히트 테스트의 더 나은 버전.

canvas.addEventListener("click",handleEvent);

var dx=cx-clickX; 
var dy=cy-clickY; 

if(dx*dx+dy*dy <= r*r) 
{ 
    alert("you are inside the circle"); 
}

(선택적으로) 여기 캔버스에 클릭 이벤트를 수신하기 위해 자바 스크립트를 사용하는 방법입니다 : 이것은 마우스 클릭이 원의 반지름 내에 있는지 확인하기 위해 피타고라스 theorm를 사용

var evt = e ? e:window.event;

입니다 코드와 바이올린 : (선택적으로) 당신은이 작업을 수행 할 필요가 없습니다 브라우저 간 차이를 처리하는 고체, 우수한 라이브러리 jQuery를 한 번 봐 걸릴 수 있습니다 : 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

좌표와 마우스 스크롤 비교

답변

관련 문제