Adobe Chrome에서 HTML5 캔버스 문제를 애니메이션으로 만 처리합니다. 애니메이션이 지연됩니다

Adobe Animate를 통해 HTML5 Canvas를 게시했습니다. 또한 파일 크기를 2MB 미만으로 줄였으며 모든 브라우저에서 3 초 미만으로로드됩니다. 하지만 Google 크롬에서만 프레임 (FPS) 지연 문제가 있습니다.Adobe Chrome에서 HTML5 캔버스 문제를 애니메이션으로 만 처리합니다. 애니메이션이 지연됩니다

Chrome Flags에서 2D 캔버스 크롬 가속기를 비활성화했지만 더 큰 화면 크기에서 애니메이션을 원활하게 실행하는 데 문제가 있습니다.

Animate에서 캔버스를 게시 할 수있는 방법이 있습니까? 아니면 Chrome에서 올바른 FPS로 애니메이션을로드 할 수 있도록하는 자바 스크립트 코드가 있습니까?

IE, Edge 및 FF로 테스트했으며 모든 브라우저가 원활하게 실행됩니다. 이 문제는 Google 크롬에서만 발생합니다.

2017-01-11 Michael

더 실험 후에, 우리는 또한 4K를있는 장치에 지연을 얻고있는 것 같다. – Michael

질문 [mcve]에 관련된 모든 코드를 제공해주십시오. –

이 프로파일 링을 통해 코드가 drawImage를 많이 호출한다는 사실을 발견했습니다. 내 컴퓨터에서 drawImage를 호출 할 때 시간의 86 %를 보냈습니다.

가능한 모든 프레임마다 큰 이미지를 다시 그릴 수 있습니다. 이것을 막을 수있는 방법이 있는지보십시오.

배경 이미지를 제거하고 선만 사용하면 지연이 사라지면 답변을 얻을 수 있습니다.

2017-01-14 02:27:15 gburton

drawImage는 캔버스에서 가장 빠른 작업 중 하나 여야합니다. – Kaiido

10 억 회라고하지 않을 경우. 이것은 문제인 것처럼 보인다. 내가 말했듯이, 프로파일 링에 기반하여 CPU주기의 86 %를 사용합니다. 다른 하드웨어에서 테스트를 반복하십시오. – gburton

답변