인프런 커뮤니티 질문&답변

hw.kang

작성한 질문수

애플 웹사이트 인터랙션 클론!

블렌딩 캔버스 크기 계산

canvasScaleRatio관련 문의

작성

224

안녕하세요!

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

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;
 
 

인터랙티브-웹 웹 디자인 HTML/CSS javascript svg 클론코딩

퀴즈

HTML Canvas 요소를 화면 크기에 맞춰 반응형으로 동적 조절할 때, 가장 핵심적으로 사용되는 방법은 무엇일까요?

CSS media 쿼리를 사용하여 고정된 크기 값을 여러 개 정의한다.

자바스크립트로 현재 화면의 비율을 계산하여 캔버스 크기에 적용한다.

캔버스에 `width: 100%; height: 100%;` CSS 스타일을 적용한다.

캔버스에 Flexbox 속성을 직접 적용하여 크기를 유연하게 조절한다.

답변 1

1분코딩

지식공유자

네 말씀대로 이미지 비율에 따라 어느 부분을 꽉 채울거냐에 따라, 의도에 맞는 방법으로 진행하시면 될 것 같습니다~ 정해진게 아니니까요. 이미지 생긴거에 따라서도 위아래가 잘리는게 자연스러운지, 좌우가 잘리는게 자연스러운지도 달라질 것 같아요^^ 강의에서는 애플 웹페이지에서 맞추는 방식으로 최대한 비슷하게 한거라고 보시면 될 것 같습니다.

hw.kang

작성한 질문수

전체 Q&A

질문하기