인프런 커뮤니티 질문&답변
작성한 질문수
질문있습니다
작성
·
200
0
//컨버스 사이즈에 맞춰 가정한 innerWidth와 innerHeight
//원래 비율 찾기
const recalculatedInnerWidth = window.innerWidth / canvasScaleRation;
console.log(recalculatedInnerWidth);
const recalculatedInnerHeight = window.innerHeight / canvasScaleRation;
//캔버스 영역에서 하얀색 캔버스 box그리기 15%짜리
const whiteRectWidth = recalculatedInnerWidth * 0.15;
//0번은 출발값 (박스들이 처음 setting 된 값)
values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2;
console.log(recalculatedInnerWidth);
//애니메이션이 끝났을 때 최종 값
values.rect1X[1] = values.rect1X[0] - whiteRectWidth;
안녕하세요
해당 코드에서 values.rect1X[0] 를 찍어봤는데
0이 나오더라구요 원래 0이 나오는게 맞나요?
확인해보니 개발자도구를 아래로 놓으면 0이 나오고
옆으로 놓으면 숫자가 출력되는데 무슨 차이인가요 ?!
지금 15% 들어가있는게
파란색 박스인가요?
이휴를 정확하게 모르겠네요
시작점이 0부터 시작한다는 말 인가요?
퀴즈
69%나 틀려요. 한번 도전해보세요!
HTML Canvas 요소를 화면 크기에 맞춰 반응형으로 동적 조절할 때, 가장 핵심적으로 사용되는 방법은 무엇일까요?
CSS media 쿼리를 사용하여 고정된 크기 값을 여러 개 정의한다.
자바스크립트로 현재 화면의 비율을 계산하여 캔버스 크기에 적용한다.
캔버스에 `width: 100%; height: 100%;` CSS 스타일을 적용한다.
캔버스에 Flexbox 속성을 직접 적용하여 크기를 유연하게 조절한다.
답변 1
0
1분코딩
지식공유자
값 자체는 스크린 비율에 따라 조금씩 달라질 수 있는 거라서, 9:21 초에 나오는 그림을 토대로 생각해보시면 좋을 것 같아요~ 해당 부분에서 그림으로 하는 설명이 이 부분입니다.
하얀 사각형의 폭을 전체 폭의 15%만큼 차지하게 하기 위해서 0.15를 곱해준 것이고요~