은 숨겨진 캔버스로 그릴 때 requestAnimationFrame이 필요합니까?

Question

숨겨진 캔버스 style="visibility: hidden"에 칠하는 코드가 있고이 숨겨진 캔버스를 화면에 표시되는 캔버스에 그립니다.

지금까지 내가 이해 한대로 숨겨진 캔버스 드로잉은 requestAnimationFrame을 통해 트리거되지 않아도 실행 가능해야합니다. 이거 뭡니까? 왜냐하면 나는 메인 화면에 숨겨진 캔버스를 blitting하기 위해서만 requestAnimationFrame을 사용할 것이기 때문에.

내가 작업하고있는 앱은 크게 움직이지는 않지만 무언가가 바뀌면 그릴 수있는 라인이 상당히 많습니다.

Answer 1

document.createElement("canvas")으로 캔버스를 만들고 숨겨진 스타일을 사용하는 대신 DOM 컨테이너에이 만든 캔버스를 부착하지 않아야합니다. 증명할 테스트가 필요하지만 적어도 적어도 back buffer canvas을 만드는 또 다른 방법입니다.

그래도 제 경험상 backbuffered canvas을 requestAnimationFrame으로 사용하면 절대로 효과가 없습니다. 사실 requestAnimationFrame은 브라우저 페인트를 모니터의 새로 고침 빈도와 동기화하는 작업을 수행하므로 원활한 애니메이션과 반응이 빠른 페이지가 가능합니다. 또한 사용자가 다른 탭으로 전환하면 모바일 장치의 CPU 사용량과 배터리 수명을 절약 할 수 있습니다.

back buffer 캔버스를 사용하지 않는 것이 좋습니다. 대신 requestAnimationFrame 콜백 내에서 드로잉 작업을 메인 캔버스에서 직접 수행하는 것이 좋습니다. backbuffer 캔버스에 계속 드로잉을 유지하고 주 캔버스를 requestAnimationFrame 호출에 갇히면 불필요하게 (또는 사용자에 따라 다름) CPU 사용량 및 저품질 애니메이션 낭비를 초래하는 일부 프레임이 손실 될 수 있습니다.

더 나은 방법을 선택하는 데 도움이되도록 항상 특정 사용 사례에 대한 성능 테스트를 수행하십시오.

그리고 requestAnimationFrame은 전혀 필요하지 않습니다. 항상 setInterval 또는 setTimeout을 사용할 수 있지만 requestAnimationFrame을 사용하는 전문가는 자신의 단점보다 훨씬 더 큰 방법으로 애니메이션을 제작할 수 있습니다.