인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

유상원님의 프로필 이미지
유상원

작성한 질문수

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

고화질 비디오 부드럽게 처리하기 2

이미지 스크롤과 캔버스를 통한 이미지 스크롤

작성

·

322

0

안녕하세요. 강의를 듣다 궁금한 점이 있어 질문 올립니다.

단순 이미지 스크롤이랑 캔버스에 이미지를 그리며 스크롤하는 것이랑 어떤 차이가 있나 궁금합니다.

성능면에서 많이 차이가 나는건가요?

답변 1

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

코드, 또는 브라우저나 환경에 따라서 별 차이가 없을수도 있는데요, 캔버스는 이미지와 다르게 픽셀 데이터를 자유롭게 조작할 수 있기 때문에 할 수 있는게 무궁무진하게 많답니다. 우리 예제에서는 이미지가 통째로 교체되기 때문에 <img> 태그를 쓸 경우에도 엘리먼트 1개만 필요하지만, 만약 이미지 여러개가 겹쳐보이는 효과가 필요하다면 <img>는 여러개를 사용해야하는 반면 <canvas>는 판 하나만 필요하기때문에, 개수가 많아질수록 성능면에서도 유리하다고 볼 수 있습니다^^

유상원님의 프로필 이미지
유상원

작성한 질문수

질문하기