canvasScaleRatio관련 문의

안녕하세요!

항상 수업 잘 듣고 있습니다.

canvasScaleRatio 계산 설명 중 궁금한 점이 있어 문의드립니다.

height에 딱 맞춰 계산한다고 하셨는데,

만약 브라우저창의 가로 너비가 더 길고 세로 길이가 더 짧아서 그 안의 캔버스의 가로 너비가 더 짧고, 세로 길이가 더 긴상태라면(즉, 캔버스보다 브라우저 창이 납작한 경우)

widthRatio 가 canvasScaleRatio가 되기때문에

해당 값으로 scale조절이 된다면 캔버스가 화면 너비에는 꽉차게 되지만 height또한 더 길어지게 되어 height값이 화면과는 동일하지 않게 됩니다(화면보다 캔버스 세로 길이가 더 길어서 넘어가게됨)

그런데 영상 설명에서는 계속 height값을 꽉 맞추기 위해서라고 설명하시는데 이같은 경우는 height값이 화면가 동일하지 않습니다.

결론:

브라우저 창이 홀쭉하든 납작하든 heightRatio로 계산하는게 맞지 않나요??

 case 3:
                // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요)
                const widthRatio = window.innerWidth / objs.canvas.width;
                const heightRatio = window.innerHeight / objs.canvas.height;

                let canvasScaleRatio;
                if (widthRatio <= heightRatio) {
                    // 캔보스보다 브라우저 창이 홀쭉한 경우
                    canvasScaleRatio = heightRatio;
                } else {
                    // 캔버스보다 브라우저 창이 납작한 경우
                    canvasScaleRatio = widthRatio;
                }

                objs.canvas.style.transform = `scale(${canvasScaleRatio})`;
                // objs.context.drawImage(objs.images[0], 0, 0);

                // // 캔버스 사이즈에 맞춰 가정한 innerWidth와 innerHeight
                // const recalculatedInnerWidth = window.innerWidth / canvasScaleRatio;
                // const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio;
                // console.log(recalculatedInnerWidth, recalculatedInnerHeight);

                // const whiteRectWidth = recalculatedInnerWidth * 0.15;

                break;
 
 

Inflearn Community Q&A