인프런 커뮤니티 질문&답변
작성한 질문수
canvas.context.transform 적용 시 다른 요소를 가리는 현상
작성
·
306
0
안녕하세요! 강의 열심히 따라가고 있습니다 :)
제가 중간에 놓친 부분이 있는지,
canvas.context.transform 으로 scrollHeight에 따라서 canvas 사이즈 조절 시에 일분이가 커지면서 뒤에 글씨를 가리고 있는데, 어떤 부분을 놓쳤을까요 ?
뭔가 css 일 것 같은데,
css를 잘 몰라서 어떤 부분을 봐야할지모르겠습니다 ㅠㅠ
ps. 사용중인 디스플레이가 지금 높이 1440px 인데요,
1080px보다 작은 화면에서는 정상적으로 표시되는것을 보아하니.. canvasScaleRatio가 1보다 클 경우에 문제가 되는 것 같아보입니다 :)
transform 적용해제 (개발자도구로 제거)
transform 적용후
퀴즈
69%나 틀려요. 한번 도전해보세요!
HTML Canvas 요소를 화면 크기에 맞춰 반응형으로 동적 조절할 때, 가장 핵심적으로 사용되는 방법은 무엇일까요?
CSS media 쿼리를 사용하여 고정된 크기 값을 여러 개 정의한다.
자바스크립트로 현재 화면의 비율을 계산하여 캔버스 크기에 적용한다.
캔버스에 `width: 100%; height: 100%;` CSS 스타일을 적용한다.
캔버스에 Flexbox 속성을 직접 적용하여 크기를 유연하게 조절한다.
답변 1
0
1분코딩
지식공유자
CSS transform의 scale도 자바스크립트로 제어를 하고 있는 것이라, 스크립트 부분에서 차이가 있지 않을까 예상됩니다. setLayout 함수에서 캔버스의 크기 조정하는 부분을 살펴보시면 좋을 것 같아요~