01.05 TIL

1601 단어 TILTIL

오늘 한 코딩

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

좋은 웹페이지 즐겨찾기