마우스 클릭으로 캔버스

Question

나는 캔버스에 대한 이벤트를 넘는 마우스와 마우스를 연결하려고 :

기본 캔버스 기능 drawcircle의 캔버스입니다.

사용자가 캔버스를 오버하면 캔버스가 drawEllipse으로 바뀌고 바깥 쪽이 바뀌면 drawCircle으로 변경해야합니다.

또한 사용자가 작은 lightblue circle (메시지를 경고)을 누르면 화면에 메시지를 인쇄하려고합니다.

나는 정의해야한다는 것을 알았습니다 : mouseup과 mousedown은 마우스 오버와 마우스 아웃이지만 실제로는 모르겠습니다.

http://jsfiddle.net/alonshmiel/c4upM/9/

은 어쩌면 같은 :

getPressedCanvasPixel('canvas'); 

function getPressedCanvasPixel(canvasElement) { 
    canvas = document.getElementById(canvasElement); 
    canvas.addEventListener("mousedown", alertPressedPixel, false); 
} 

function alertPressedPixel(event) { 
    canvas_x = event.pageX; 
    canvas_y = event.pageY; 
    alert(canvas_x + ' , ' + canvas_y); 
} 

는 어떤 도움 감사합니다!

Answer 1

jQuery 사용은 괜찮습니까? 그렇다면, 이런 식으로 뭔가를 시도 : 작은 원에 관해서는

$('#canvas').on('mouseenter', function() { 
    console.log('enter'); // do your actions 
}) 
.on('mouseleave', function() { 
    console.log('exit'); // do your actions 
}); 

을, 당신은 그것의 coorditates을 저장하고 마우스 클릭 이벤트를 처리 할 필요가, 당신은 실제로 그래서 그냥 그들이 가까이에있는 경우 좌표를 확인 추가, 그것을 당신의 원.