01.05 TIL
오늘 한 코딩
- video 태그를 사용해 스크롤 위치에 반응하여 화면에 출력되도록 하기
- 저화질, 고화질 모두 해보고 차이점을 파악하기
- video 태그에서 고화질 영상은 심각한 성능 저하를 보이는 것을 확인
해결방법 : image를 사용하자!
- video 태그에서 고화질 영상은 심각한 성능 저하를 보이는 것을 확인
- 저화질, 고화질 모두 해보고 차이점을 파악하기
- image 태그를 사용해 스크롤 위치에 반응하여 화면에 출력되도록 하기
- 이를 위해서는 비디오 1초 당 60개의 이미지가 필요(60프레임)
- 비디오에서 이미지를 추출해주는 프로그램 사용
- 배열에 모든 이미지의 src를 담고, 스크롤의 비율마다 맞는 이미지를 출력
- 고화질 이미지도 끊김 없이 부드럽게 화면에 출력되는 것을 확인
하지만 문제점도 있는데, 자바스크립트에서 이미지가 모두 로드되지 않았을 때 스크롤을 하게 되면 에러가 발생한다. 이것은 자바스크립트가 모두 로드되었을 때 화면을 보여주게끔 로딩 창을 만드는 것으로 해결할 수 있음 - 더 좋은 해결방법 : canvas 사용
- 고화질 이미지도 끊김 없이 부드럽게 화면에 출력되는 것을 확인
- canvas 태그를 사용해 image를 출력해보기
- canvas와 canvas.getContext('2d')는 거의 한 몸!
getContext의 인수로는 webgl, webgl2, bitmaprenderer도 있는데 아직 필요하지 않은 것 같음 - drawImage 메소드로 image를 화면에 출력할 수 있음
- 가운데 정렬을 위해 translate3d를 사용할 수 있고, 성능에 매우 좋음
- canvas와 canvas.getContext('2d')는 거의 한 몸!
새롭게 배운 것
cavnas
// js
const $canvas = document.querySelector('canvas');
const context = $canvas.getContext('2d');
context.drawImage(imageSrc, dx, dy)
canvas에 이미지를 넣기 위해 drawImage를 사용할 수 있다는 것을 배웠고, canvas가 image 태그를 사용했을 때보다 성능에 더 유리하다는 것을 배웠다.
중앙 정렬
// css
canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
위와 같은 방법으로 쉽게 중앙 정렬을 할 수 있다.
top과 left를 50%씩 주어 화면의 중앙에 canvas의 왼쪽 꼭짓점이 위치하게 되는데, 이때 자신의 크기의 반만큼 top과 left로 이동하게 되면 중앙 정렬이 되는 원리이다.
처음에는 이해하지 못했는데 css로 연습하다가 어떤 원리인지 알게 되었다.
Author And Source
이 문제에 관하여(01.05 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dudtjr913/01.05-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)