Canvas에 많은 객체를 다시 그리기

Question

canvas에서 많은 객체를 빠르고 효율적으로 이동할 수 있습니까? 기본적으로 약 1000 개의 개체가 있고 스크롤을 에뮬레이트하기 위해 모든 개체를 한꺼번에 이동하려는 경우 drawImage() 1000+ 번을 호출하여 모든 개체를 다시 그리는 속도가 매우 느립니다.

어쨌든 이것을 최적화 할 수 있습니까? 나는 문제의 예 링크가 (그 100 개체 만의) : http://craftyjs.com/isometric/

Answer 1

두 번째, 오프 스크린 캔버스에 모든 객체를 그릴 수 있으며 전체 캔버스 만 블 리할 수 있습니다 (drawImage() 캔버스 요소 허용).

그러나 데스크톱 브라우저를 타겟팅하는 경우에는 필요하지 않습니다. 전체 화면을 단순하게 다시 그리며 순진한 구현을 매우 빠르게 수행 한 implemented tile engine (source)입니다.

Answer 2

이후 여러 층으로 물건을 할 예 전체 배경 스크롤하기 어렵다 빠른 낮은 수준의 비트 맵 복사를 제공하지 않습니다 캔버스 한 번에 가장자리를 렌더링합니다.

그럼 어떻게 할 수 있습니까? 간단히 말해서, 아무것도. 특히 스크롤 할 때 정적 배경이 많거나 적을 때 여러 캔버스로 트릭을 할 수는 있지만 움직이는 객체의 경우 성능 향상 트릭이 거의 없습니다.

그래서, 당신은 모든 메이저 브라우저에서 하드웨어 가속 배송 대기로 이동했습니다,이 말도 안되는 소리로 들리 겠지만하지만 그것도 기다리고 있어요 :/

문제는 canvas 위해 설계 적이 있다는 것입니다 게임 물건. 그것은 글쎄, 기본적으로 일종의 플라이 드로잉 물건, 디자이너가 염두에두고 Photoshop 클론을 가지고 있다고 생각하지만, 실제로 게임이 아니라는 사실은 전혀 없다. 사실 은 명확한 동작을 보여 주며,은 최적화가 없다는 것을 증명한다. 동일한 색상으로 전체 캔버스를 지울 때 대신 사용합니다.

Answer 3

이미지가 이미 서로 합성되어 있지 않고 사각형 영역으로 정의 된 경우 이미지의 첫 번째 매개 변수로 캔버스를 사용하고 canvas.drawImage()을 사용하고 하위 영역으로 그리는 것이 다시 그리기보다 훨씬 빠릅니다 모든 물건.

여러 캔버스를 레이어하고 HTML의 개체로 맨 위 캔버스를 슬라이드하여 스크롤 할 수도 있습니다.

편집 : 예를 실제로 살펴보면 Google지도와 비슷하게 구현해야합니다. 즉, 캔버스 타일을 만들고 HTML 페이지에서 왼쪽/오른쪽으로 슬라이드합니다. 일단 캔버스가 화면에서 완전히 벗어나면 (예 : 왼쪽 가장자리에서 벗어남), 다른 쪽 (오른쪽 가장자리)으로 이동 한 다음 다시 그립니다. 이렇게하면 모서리에서 움직이는 캔버스가 겹치는 개체 만 다시 그리면됩니다.

Answer 4

내가이 문제를 해결하기 위해 수행 한 작업은 화면에 10 개의 사각형이 있었기 때문에 흰색 배경에 애니메이션을 적용하고 싶었습니다. 캔버스 위에 흰색 직사각형을 그어 캔버스를 지우고 애니메이션이 작동하도록했습니다. 말이 돼?

@Ivo 필자는 http://www.w3.org/TR/html5/the-canvas-element.html에서 캔버스가 게임과 같은 응용 프로그램 용으로 만들어진 것을 읽었습니다. 외부 엔진에 대한 종속성을 없애기위한 해결책 이었기 때문입니다. Canvas가 내장되어있어 JavaScript로 구동되는 브라우저에 내장 된 플래시 플레이어와 비슷합니다. 나는 그것이 매혹적이라고 생각한다.

Answer 5

타일 렌더링을 사용할 수 있습니다. http://www.gamesfrommars.fr/demojsv2/ (Chrome에서 더 잘 볼 수 있음)