HTML5 Canvas : 개체를 다시 그리거나 비트 맵을 사용하는 것이 좋습니다.

Question

내 프로젝트에는 그래픽 객체가 반복적으로 그려지는 HTML5 캔버스가 있습니다. 이러한 개체는 빠르게 변합니다. 그리기에는 시간이 필요합니다. 어떻게하면 더 빨리 만들 수 있습니까?

개체는 지나치게 복잡하지는 않지만 호, 그라디언트, 다각형 등의 개체가 포함되어 있습니다.

개체의 모양은 각각 약 10 개의 값 중 하나를 갖는 약 10 개의 속성에 따라 다릅니다. 즉, 물체가 가질 수있는 것보다 약 100 가지의 다른 모습이 있음을 의미합니다. 그래서 각 모양을 한 번 그리면 비트 맵을 다시 캐싱하여 재사용 할 생각입니다.

모든

1. 것은 무엇 HTML5 캔버스와 함께이 작업을 수행하는 가장 좋은 방법이 될 것이다 (나는 준비가 만든 이미지를 사용할 수 없습니다 즉) 클라이언트에서 작업을해야합니까?
2. 매번 오브젝트를 다시 그리는 것보다 비트 맵 작업의 오버 헤드가 크지 않습니까?

Answer 1

캐시 캐시 캐시! this article by Simon Sarris 및 my own findings을 확인하십시오. 기본적으로 캔버스를 메모리에 복사하여 거기에 내용을 복사하면 다시 사용할 수 있습니다. 이렇게하면 성능이 크게 향상됩니다.

Rotating sprites without caching

Rotating sprites WITH caching

당신은 2 예에서 꽤 큰 개선을 볼 수 (좀비를 찾기 위해 위쪽으로 걸어).

편집

jsfiddle example cached

jsfiddle example not cached

시몬은 정말 선택 일까지 방금 데모를보고 성능 향상을 볼 수 없습니다하는 경우는 어떤 의견이을 기록했다.

JSperf findings by Simon Sarris

Answer 2

당신이 다시 그릴 필요가 얼마나 얼마나 많은 개체, 결과적으로 두 번째에 변경 수있는 방법을 많은 개체에 따라 - 같은 초 이내에, 캐싱보다 매우 옵션이 될 수 다시 그립니다.

일반적으로 다음 결정 경로를 고려하는 것이 좋습니다.

귀하의 개체 중 하나가 나타날 수있는 방법은 100 가지가 될 수 있다고 말씀하셨습니다.

이것은 각 개체에 대해 이론적으로 가능한 최소 99^2 상태 전환과 비슷한 것으로 간주 될 수 있습니다.

이 상태 전환은 모양/크기/색상이 극적이지만 여전히 잘 식별되고 표시되며 관리가 가능합니까? 그렇다면 모든 개체에서 사용할 수있는 모양을 한 번만 캐싱하면 성능이 크게 향상 될 수 있습니다.

반대로 배경이 거의 변경되지 않고 그려진 부분이 오브젝트 영역의 관련성이 떨어지는 부분을 차지하면 매번 다시 그려야 할 수도 있습니다.

사실 미리 렌더링 된 이미지는 모든 상태 전환시 완전히 렌더링해야 할 때 사전 렌더링 된 이미지를 다시 그리는 동안 드로잉 된 객체가 동적으로, 특히 연속적으로 변경되는 경우 성능 요구에 적합하지 않을 수 있습니다. 객체가 계산 부하가 적다는 것을 의미합니다.