자바 스크립트가있는 사용자 정의 커서 이미지

Question

마우스 커서를 사용자 정의 이미지로 변경해야합니다.

가능한 경우 스프라이트 시트에서 수행하고 싶습니다. 게임에서 사용하기 때문에 CSS에서 처리 할 수 ​​없습니다. 나는 언제 어떻게 결정할지를 안다.

내가 알아야 할 것은 커서를 이미지로 바꾸고 이미지 위치와 크기를 어떻게 결정 하는가이다. drawImage의 이미지 위치와 비슷한 쉬운 솔루션이 있습니까?

Answer 1

당신은 커서를 숨기기 위해 자바 스크립트를 사용하여 CSS를 설정할 수 있습니다

your_canvas.style.cursor = "none" 

그런 다음이 같은으로 커서의 위치를 ​​(그것이 지금 숨겨져) 얻을 수 있습니다 : 다음

your_canvas.addEventListener("mousemove", function (ev) { 
    var mouseX = ev.pageX - GetTopLeft(your_canvas).Left; 
    var mouseY = ev.pageX - GetTopLeft(your_canvas).Top; 
}); 

을 수행 할 수 있습니다 캔버스를 수정하여 해당 위치에서 멋진 커서 스프라이트를 표시하십시오. 나는에서 GetTopLeft 기능을 복사 한

function GetTopLeft(elm){ 

    var x, y = 0; 

    //set x to elm’s offsetLeft 
    x = elm.offsetLeft; 

    //set y to elm’s offsetTop 
    y = elm.offsetTop; 

    //set elm to its offsetParent 
    elm = elm.offsetParent; 

    //use while loop to check if elm is null 
    // if not then add current elm’s offsetLeft to x 
    //offsetTop to y and set elm to its offsetParent 

    while(elm != null) 
    { 

    x = parseInt(x) + parseInt(elm.offsetLeft); 
    y = parseInt(y) + parseInt(elm.offsetTop); 
    elm = elm.offsetParent; 
    } 

    //here is interesting thing 
    //it return Object with two properties 
    //Top and Left 

    return {Top:y, Left: x}; 

} 

내가 기억할 수 있지만 당신은 캔버스를 사용하는 경우

Answer 2

, 바로 위에 커서를 숨기 ... 다음과 같이

GetTopLeft 정의된다 캔버스에 캔버스에 자신의 스프라이트를 그립니다.