dpr 환경에서 캔버스의 scale() 함수가 필요한 이유가 뭔가요?

Question

안녕하세요? html css js를 공부중인 초보자입니다.기초적인 문법을하고 혼자서 SnakeGame을 만들고있고 캔버스를 사용합니다.처음에 canvas에 그림을 그렸는데 이게 블러가 된것마냥 흐릿하고 깨져 나오더라구요.찾다가 해상도..그러니까 dpr 관련인 것을 알게 되었습니다.그래서 어찌저찌 문제해결은 했는데 한가지 이해가 안가는 부분이 있어 질문드립니다. // DPR 값 가져오기 const dpr &#61; window.devicePixelRatio; // 화면에 보이는 캔버스 크기 canvas.style.width &#61; &#96;${CANVAS_WIDTH}px&#96;; // 300px; canvas.style.height &#61; &#96;${CANVAS_HEIGHT}px&#96;; // 400ox; // 캔버스의 그리기 영역 크기 canvas.width &#61; CANVAS_WIDTH * dpr; canvas.height &#61; CANVAS_HEIGHT * dpr; // 캔버스 크기 보정 ctx.scale(dpr, dpr); // << 이건 왜 사용하는가...이 블러 현상을 해결하기 위해서 그리기 영역(물리적 픽셀의 크기를 DPR 값(환경)에 맞게 조정하여 해결하였습니다.이제 질문입니다.마지막의 ctx.scale(dpr, dpr) 이 정확히 어떠한 함수인지는 모르겠지만 제 추측으로는canvas.style.~ (혹은 css파일이나, 인라인스타일)을 통해 지정한 css픽셀 을 dpr에 맞게끔 물리적 픽셀을 조정한것이라고 생각합니다.만약에, 제가 생각하는 것이 맞다면, 이 함수는 왜 필요한건가요?왜냐하면 지금 저는 DPR이 2인 환경의 디스플레이(모니터)를 사용하고 있습니다.그렇다면 딱히 scale() 을 하지 않더라도 저는 이미 dpr이 2인 디스플레이를 사용중이므로 css픽셀이 300x400 인 캔버스가 dpr 환경에 맞게 자동적으로 물리적 픽셀이 조정되지 않을까 해서입니다.문제 해결을 하기 위해 찾던 코드들이 전부 scale() 함수를 사용하고 있기에 질문드려봅니다.물론 scale()함수가 제가 생각하는것이 맞다면요..감사합니다!

킁킁탐정 · Answer

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale기본적으로 캔버스의 단위는 정확히 1픽셀입니다. 배율 변환은 이 동작을 수정합니다. 예를 들어 배율이 0.5이면 단위 크기가 0.5픽셀이 되며, 도형은 정상 크기의 절반으로 그려집니다. 마찬가지로 배율이 2.0이면 단위 크기가 증가하여 1단위가 2픽셀이 되고, 도형은 정상 크기의 두 배로 그려집니다.

dpr 환경에서 캔버스의 scale() 함수가 필요한 이유가 뭔가요?

1개의 답변

기술 목록