HTML5 캔버스에서 X 개의 원을 가장 빨리 그릴 수있는 방법은 무엇입니까?

캔버스 그리기의 속도에 관한 간단한 질문.HTML5 캔버스에서 X 개의 원을 가장 빨리 그릴 수있는 방법은 무엇입니까?

1 개의 캔버스에 100 개의 원을 그리거나 100 개의 캔버스에 1 개의 원을 그리는 것이 더 빠릅니까?

2017-02-21 Max

을 :) 도움이되기를 바랍니다. 네, 경로 메서드를 사용하고 있습니다. 화면 밖 캔버스로 그리는 것은 무엇을 의미합니까? 이것은 모든 원이 동일하다고 가정합니까? – Max

여러 작업자의 버퍼를 준비하고 함께 배치하고 캔버스에 넣습니다. 하지만 직접 그리기 명령을 사용하는 것보다 더 어려워 야합니다. –

이것은 하나의 문제이며 모든 것이 요구 사항에 따라 "테스트를 수행"하게됩니다. 단일의 색을 가지는 단일의 원의 경우, putImageData는 고속의 엔티티 (> 5000)로 가장 빠릅니다. 아래에서 drawImage (offscreenCanvas)는 필요한만큼 빠릅니다. 동일한 색상으로 끊임없이 변화하는 크기의 서클의 경우 모든 서클로 구성된 단일 경로가 최대 20000 개의 엔티티까지 빨라질 수 있습니다. 내 자신을 색으로 20,000 개가 넘는 색으로 15,000 개 이상의 서클로 끊임없이 변화시키는 (...) 나는 내 원을 색으로 정렬하고 단일 경로 옵션으로 그립니다. – Kaiido

-1

하나의 캔버스에 100 원을 그릴 수 많은 쉽습니다 :

당신은 1 캔버스 * 100 원, 100 캔버스 * 1 원, 여전히 말하고있다인지,라는 같은 행동을 할 때 정확한 양의 시간을 그리는 프로그램.

그래서 차이점은 무엇입니까?

프로그램에 100 개의 캔버스를 도입하면 프로그램을 백그라운드에서 저장할 필요가 있으므로 프로그램이 훨씬 느리게 실행됩니다. 속도가 너무 많이 떨어지지는 않지만 여전히 감소합니다.

1 캔버스의 또 다른 이점은 하나의 캔버스를 100 캔버스가 아닌 모든 것을 제어하는 것이 훨씬 쉽다는 것입니다.

편집 : 하나의 캔버스에서 원하는 경우 원을 겹칠 수도 있지만 100 개의 캔버스가있는 경우 원을 겹칠 수 없습니다.

내가 내가 내가 먼저 여기에 쿼리 줄 알았는데, 이것은 당신이 아직 성능 테스트를 수행하지 않은

출처

2017-02-21 16:23:24

HTML5 캔버스에서 X 개의 원을 가장 빨리 그릴 수있는 방법은 무엇입니까?

답변

관련 문제