inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Bản sao tương tác trang web của Apple!

Tính toán kích thước canvas trộn

canvasScrollRatio를 맞춰주는 기준

272

superfly90612

34 câu hỏi đã được viết

2

let heightRatio = window.innerHeight/objs.canvas.height;
let widthRatio = window.innerWidth/objs.canvas.width;
let canvasRatio;
console.log('heightRatio:',heightRatio,'widthRatio:',widthRatio);
if (heightRatio<=widthRatio) {
//캔버스보다 브라우저가 납작할때
canvasRatio = widthRatio
} else {
//캔버스보다 브라우저가 길쭉할때
canvasRatio = heightRatio;
}
1.캔버스 대비 화면의 폭/높이 비율을 구하는 건 알겠는데
왜 한쪽비율의 값이 더 클 때 그 값을 canvasRatio로
쓰는지 잘 모르겠습니다.
스크롤하다가 캔버스의 윗 부분이 화면에 들어맞으면 움직이기 위해서라면
heigthRatio만 조절해서 캔버스의 높이를 화면의 높이와
맞춰주면 되지 않나 헷갈려서요~
objs.canvas.style.transform=`scale(${canvasRatio})`;
objs.context.drawImage(objs.videoImages[0],0,0);
//recalculated하는 이유?
//캔버스 사이즈에 맞춰 가정한 innerWidth,innerHeight
const recalculatedWidth = window.innerWidth / canvasRatio;
const recalculatedHeight= window.innerHeight / canvasRatio;
2.recalcaulated하는 이유
recalculatedWidth/Height 값을 구하면 둘 중 하나는
원래 캔버스의 너비/높이 중 하나의 값을 가지게 된다고 생각되는데요.
캔버스를 화면의 크기에 맞춰준 상태인데 다시 계산하는 이유가 있을까요?
화면의 크기에 맞춰진 캔버스의 양 끝에 그대로 사각형을 그려주면
되는 게 아닌가 싶어서요.
질문이 너무 긴데 이해가 쉽지 않아 여쭤봅니다.
항상 강의 잘 듣고 있습니다.

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

Câu trả lời 2

3

studiomeal

화면과 캔버스의 비율이 같지 않기 때문에
그 상태에서 높이를 꽉 채우고 가로로 가운데 정렬을 하기 위함이라고 생각하시면 됩니다.
화면 비율이 어떻든 캔버스 자체가 1920x1080으로 가로보다 세로가 작기 때문에
풀 스크린 효과가 나도록 세로를 화면 높이에 꽉 채우는거죠~
세로를 채우면 화면의 양 끝은 캔버스의 양끝과는 다른 위치가 되고(영상에 그림으로 설명하는 부분)
우리는 캔버스의 양 끝이 아닌 화면의 양 끝에 맞추어 그려야하기 때문에 X 위치도 따로 계산해주는 것이고요^^

이런 부분은 디자인 형태에 따라 계산의 기준이 달라지는거라
이 예제의 경우 이렇게 계산한 것이고,
으하핳님께서 만드실 프로젝트에서는 굳이 필요치 않은 계산일 수도 있습니다^^
디자인 형태에 따라 또 다른 계산식이 필요할지도 모르고요!

0

superfly90612

감사합니당

이미지 배경 문의

0

68

1

[크로스브라우징] safari에서 동영상 영역 미노출

0

108

1

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

0

111

2

vue강의는안하시나요?!

0

104

1

스크롤 속도에 따른 messageA_opacity_out

0

118

1

drawImage(objs.videoImages[sequence], 0, 0); error

0

91

1

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

0

131

0

선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.

0

210

1

React에서 load 상태를 어떻게 감지할 수 있을까요?

0

685

1

[섹션7-3: 버그수정 2] tempYOffset 오류

0

197

1

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

0

316

2

게속 오류떠서 글 작성해봐요....

0

510

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

492

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

459

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

452

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

435

1

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

0

535

1

원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?

0

598

2

라이브러리 질문

1

412

2

translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데

0

410

1

[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ

0

599

2

scrollLoop 함수 질문

0

480

2

도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ

0

1237

2

load 이벤트시 첫 비디오 이미지가 뜨네요.

0

509

2