펼쳐진 캔버스를 클릭 한 위치를 찾는 방법은 무엇입니까?

Question

샌드 박스 게임을 만들 때부터 뻗어있는 캔버스가 있습니다. 어떤 스트레치 픽셀을 클릭했는지 알아야하기 때문에 캔버스가 클릭 된 페이지에서 픽셀을 감지하는 일반적인 방법을 사용할 수 없습니다. 희망적으로 이것은 의미가 있습니까?

Answer 1

당신이해야 할 일은 현재의 캔버스 크기와 원래의 캔버스 크기에 따라 위치를 조절하는 것뿐입니다. canvas.getContext('2d')로 받고있다

function scaleCursorPoint(int mouseX, int mouseY, ctx) { 
    return { 
     x: mouseX * (ctx.canvas.width/ctx.width), 
     y: mouseY * (ctx.canvas.height/ctx.height) 
    }; 
} 

ctx은 (미연 신 본래의 폭을 갖는다. ctx.canvas 원래 canvas DOM 소자를 얻는다. ctx.canvas.width는 DOM 요소 (신장 크기)의 크기이다.

나눈다을 두 개 그리고 당신은 스케일 값을 얻습니다. 그리고 나서 당신이 가진 포인트와 함께 그 배율 값을 여러 개 만듭니다.