Inflearn Community Q&A
asked
rect1X[1]의 좌표가 왜 그쪽일까요?
Written on
·
412
0
11:41초에서 왜 그쪽이 rect1X[0]의 좌표인지 모르겠어요...ㅠㅠ
제가 어디까지 이해했고 어떤부분에 의문을 가지고 있는지 그림으로 그려서 정리해보았습니다.
javascriptHTML/CSSsvg웹 디자인인터랙티브-웹클론코딩
Quiz
69% of people got it wrong. Give it a try!
HTML Canvas 요소를 화면 크기에 맞춰 반응형으로 동적 조절할 때, 가장 핵심적으로 사용되는 방법은 무엇일까요?
CSS media 쿼리를 사용하여 고정된 크기 값을 여러 개 정의한다.
자바스크립트로 현재 화면의 비율을 계산하여 캔버스 크기에 적용한다.
캔버스에 `width: 100%; height: 100%;` CSS 스타일을 적용한다.
캔버스에 Flexbox 속성을 직접 적용하여 크기를 유연하게 조절한다.
Answer 3
2
(objs.canvas.width - reCaculatedInnerWidth) / 2 를 하면 이해하신대로 좌측 빨간색 하나만 남는것이 맞고,
그렇기 때문에 이 값을 우리가 구하고자 하는 '좌측파란사각형'을 그리기 시작할 좌표의 'x값'으로 설정합니다
이미 그려져있는 빨간 캔버스를 기준으로 왼쪽에서부터 (objs.canvas.width - reCaculatedInnerWidth) / 2 만큼 떨어져 있는 곳에 좌측 파란사각형을 그릴거니까
values.rect1X[0] = (objs.canvas.width - reCaculatedInnerWidth) / 2 로 설정합니다.
values.rect1X[0] = (objs.canvas.width - reCalculatedInnerWidth) / 2;
values.rect1X[1] = values.rect1X[0] - whiteRectWidth
0
0