• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

canvas가 성능상의 이점을 가지는 이유가 궁금합니다.

20.06.12 10:36 작성 조회수 505

0

안녕하세요! 좋은 강의 감사합니다.

이미지 태그의 src를 직접 바꾸는 것 보다는 canvas를 사용하는 것이 좀 더 부드러운 애니매이션이 가능하다고 강의에서 언급해주셨는데요, 

어떤 이유로 canvas가 성능상의 이점을 가지는지가 궁금해져 질문드립니다.

답변 2

·

답변을 작성해보세요.

1

캔버스 자체가 픽셀 하나하나의 색상데이터를 직접 다루는 식으로 동작을 하는거라
기본적으로 <img> 같은 추상화 레벨이 높은 고급 객체들을 다루는 것보다 연산이 빠르다고 합니다.
그 대신 그만큼 직접 해줘야 하는 일이 많아 코딩량은 더 많아지는 것이고요~
이미지나 브라우저에따라, 육안으로 차이는 없을 수도 있기때문에 반드시 캔버스를 쓰실 필요는 없다고 생각됩니다^^

덧붙여, 캔버스 판 크기가 커질 수록(픽셀수가 늘어날수록) 캔버스 성능이 저하되기 때문에,
경우에 따라서는 모든 처리를 캔버스로 하는 것도 바람직하지 않을 수 있습니다.
예를들어 게임을 만들 경우,
계속 동적인 움직임을 갖는 캐릭터들은 캔버스에서 그려주고
정적인 배경이미지는 CSS의 백그라운드로 처리하는 식으로 섞어서 해주기도 하거든요~
구조나 환경에 따라 변수가 있을 수 있기때문에
<img>나 CSS 배경이미지, 그리고 캔버스를 번갈아가며, 또는 혼합해서 테스트 해보시고,
제일 나아보이는 것으로 택해서 개발하시면 좋을 것 같다는 생각입니다.

애플에서도 성능상의 이유로 캔버스를 즐겨 사용하고 있기 때문에,
이 강의는 애플 클론인 만큼 똑같이 캔버스로 개발해주었습니다^^

0

신세현님의 프로필

신세현

질문자

2020.06.12

어떤 경우에 canvas를 사용하면 좋을지까지 이해가 됩니다.

여러 케이스와 함께 자세한 설명 남겨주셔서 감사합니다!