HTML5 캔버스 마우스 수신기 좌표 Undefined

Question

마우스 수신기에서 마우스 좌표를 가져 오려고하지만 정의되지 않은 상태가됩니다. 마우스 리스너가 Canvas에 추가되고 있으며 리스너가 onMouseMove 함수를 트리거하고 있지만 전달되는 이벤트에는 마우스 위치에 대해 정의 된 x 또는 y 좌표가없는 것 같습니다. 나는 원인을 잘못 뭘하는지에 event.y

어떤 아이디어를 event.pageX, event.pageY, event.clientX, event.clientY, event.x :

나는 다음과 같은 변수를 시도했습니다 마우스 좌표가 정의되지 않은 상태가됩니까? 어떤 도움을 주셔서 감사합니다!

<script> 
var boxes; 
var canvas; 
var context; 

$(document).ready(function() { 

    canvas = document.getElementById("requirement_tree"); 
    context = canvas.getContext("2d"); 

    // Add mouse listener 
    canvas.addEventListener("mousemove", onMouseMove, false); 
}); 

// Get the current position of the mouse within the provided canvas 
function getMousePos(event) { 
    var rect = canvas.getBoundingClientRect(); 


    if (event.pageX != undefined && event.pageY != undefined) { 
     x = event.pageX; 
     y = event.pageY; 
    } else { 
     x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 

    console.log("X:" + x); 
    console.log("Y:" + y); 

    return { 
     X: x - rect.left, 
     Y: y - rect.top 
    }; 
} 

function onMouseMove(event) { 
    var mousePos = getMousePos(canvas, event); 
    var message = 'Mouse position: ' + mousePos.X + ',' + mousePos.Y; 
    context.font = '10pt Arial' 
    context.fillStyle = 'black'; 
    context.textAlign = 'left'; 
    context.clearRect(0, 0, 200, 200); 
    context.fillText(message, 100, 100); 
} 
</script> 

Answer 1

적어도 mouseMove 이벤트 처리기에서 오류가 발생했습니다. 핸들러의 두 번째 인수에서 전송 된 이벤트 객체입니다.

// ... 
// Get the current position of the mouse within the provided canvas 
function getMousePos(element, event) { 
    var rect = canvas.getBoundingClientRect(); 
// ...