nanalike

저는 창 크기 비율에 맞춰 캔버스 비율을 조절한다고 이해했어요!<img src="https://cdn.inflearn.com/public/files/posts/761d7c39-09ee-420b-b94b-11d44929f222/Screen Shot 2022-09-14 at 8.07.24 PM.png" alt="Screen Shot 2022-09-14 at 8.07.24 PM.png" title="Screen Shot 2022-09-14 at 8.07.24 PM.png">현재 창 사이즈와 캔버스 사이즈가 이렇다고 할 때,<img src="https://cdn.inflearn.com/public/files/posts/cb12f909-4fc6-4273-8488-7316b8702325/Screen Shot 2022-09-14 at 8.07.31 PM.png" alt="Screen Shot 2022-09-14 at 8.07.31 PM.png" title="Screen Shot 2022-09-14 at 8.07.31 PM.png">여기서 heightRatio가 더 크므로 scale(0.83)을 적용하면 1920*0.833 = 1600, 1080*0.833 = 900, 즉 1600*900의 크기가 됩니다. (윈도의 6:9 비율에 맞춰 줄어듦)<img src="https://cdn.inflearn.com/public/files/posts/8acafb79-ad13-455c-af4e-c69897218c5c/Screen Shot 2022-09-16 at 12.13.33 PM.png" alt="Screen Shot 2022-09-16 at 12.13.33 PM.png" title="Screen Shot 2022-09-16 at 12.13.33 PM.png">이 1600/만약 캔버스의 원본 높이를 유지한 채 ratio를 16:9 → 6:9로 변환하면 720*1080이 됩니다. (윈도와 비슷하게 6:9 비율로 홀쭉해짐) 이걸 구하는 게 600/0.833, 900/0.833이더라구요. 줄어든 scale 만큼 나눠서 원래 비율을 찾는 듯합니다.<pre class="hljs"><code>const recalculatedInnerWidth = window.innerWidth / canvasScaleRatio;
const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio;</code></pre>&nbsp;앞서 1분코딩님이 댓글에서 말씀주신 "현재 창 사이즈와 같은 비율의 캔버스 크기를 설정"하는 과정이 이걸 뜻하는 것 같네요!

nanalike

Posts