01.05 TIL

오늘 한 코딩

• video 태그를 사용해 스크롤 위치에 반응하여 화면에 출력되도록 하기
  • 저화질, 고화질 모두 해보고 차이점을 파악하기
    • video 태그에서 고화질 영상은 심각한 성능 저하를 보이는 것을 확인
      해결방법 : image를 사용하자!

• image 태그를 사용해 스크롤 위치에 반응하여 화면에 출력되도록 하기
  • 이를 위해서는 비디오 1초 당 60개의 이미지가 필요(60프레임)
  • 비디오에서 이미지를 추출해주는 프로그램 사용
  • 배열에 모든 이미지의 src를 담고, 스크롤의 비율마다 맞는 이미지를 출력
    • 고화질 이미지도 끊김 없이 부드럽게 화면에 출력되는 것을 확인
      하지만 문제점도 있는데, 자바스크립트에서 이미지가 모두 로드되지 않았을 때 스크롤을 하게 되면 에러가 발생한다. 이것은 자바스크립트가 모두 로드되었을 때 화면을 보여주게끔 로딩 창을 만드는 것으로 해결할 수 있음
    • 더 좋은 해결방법 : canvas 사용

• canvas 태그를 사용해 image를 출력해보기
  • canvas와 canvas.getContext('2d')는 거의 한 몸!
    getContext의 인수로는 webgl, webgl2, bitmaprenderer도 있는데 아직 필요하지 않은 것 같음
  • drawImage 메소드로 image를 화면에 출력할 수 있음
  • 가운데 정렬을 위해 translate3d를 사용할 수 있고, 성능에 매우 좋음

새롭게 배운 것

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로 연습하다가 어떤 원리인지 알게 되었다.