웹 페이지에 html 캔버스의 위치

Question

비슷한 캔버스 기반 스크립트가 있습니다. dottydots과 비슷한 스크립트가 있습니다. 그 잘 작동하지만 캔버스 위치를 변경하고 싶습니다. 나는이 위치를 시도했다 : 절대. 작동하지만 캔버스의 시각적 영역 만 이동합니다. 캔버스의 작업 영역은 (마우스 포인터를 사용하여 캔버스에서 작업하는) 오래된 위치에 있다는 것을 의미합니다.

Answer 1

오른쪽 마우스 좌표를 가져 오는 데 문제가있는 것 같습니다.
getBoundingClientRect를 사용하여 올바르게 설정해야합니다.

그래서, 당신은 캔버스를 확장 할 수와/CSS를 높이 사용하지 않는 제공의 공식은 다음과 같습니다

이

var mousePos = [-1, -1]; 
var canvasRect, canvasLeft, canvasTop 
function updateCanvasRect() { 
    canvasRect = canvas.getBoundingClientRect(); 
    canvasLeft = canvasRect.left; 
    canvasTop = canvasRect.top ; 
} 
function updateMousePos(e) { 
    mousePos[0] = e.clientX - canvasLeft; 
    mousePos[1] = e.clientY - canvasTop ; 
} 

당신이

updateCanvasRect를 호출해야합니다 문서를로드 한 후 스크롤을 허용하면 스크롤합니다.