HTML5 큰 캔버스

Question

커다란 캔버스 (6400x6400)를 동적으로 만들 때 아무 것도 그려지지 않을 것이고, 캔버스를 작은 크기로 설정하면 100 % 시간이 걸린다는 것을 알았습니다. 그러나 내가 더 잘 알지 못하기 때문에 큰 캔버스가 올바르게 작동하도록하는 것 외에 다른 선택의 여지가 없습니다.

thisObj.oMapCanvas = jQuery(document.createElement('canvas')).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo(thisObj.oMapLayer).get(0);

// getContext and then drawing stuff here... 

캔버스의 목적은 단순히 (뷰포트 나는 사람들이 그들에게 전화 생각) 주위를 드래그 할 수 있습니다 사업부 컨테이너 내에서 두 개의 노드 (이미지) 사이에 선을 그리는 것입니다.

내가 생각하는 것은 캔버스가 캔버스 크기를 조정하고 캔버스가 작아 질 때마다 이전에 작동한다고 말했던 것처럼 컨텍스트 드로잉을 방해한다는 것입니다.

가능한 해결책을 경험했거나 알 수있는 사람이 있습니까?

Answer 1

엄청난 크기의 캔버스입니다. 픽셀 당 6400 x 6400 x 4 바이트는 156MB이며 이중 버퍼링을 위해 구현시 두 개 이상의 버퍼를 할당해야하거나 해당 크기의 비디오 메모리를 할당해야 할 수도 있습니다. 그 모든 메모리를 할당하고 지우려면 시간이 걸릴 것입니다. 그런 할당에서 성공할 수는 없습니다. 엄청난 캔버스가 필요한 이유가 있을까요? 두 div 사이에 선을 그리는 데 필요한만큼만 캔버스 크기를 조정하거나 캔버스 대신 SVG를 사용해 볼 수도 있습니다.

또 다른 가능성은 캔버스를 큰 타일로 나눠보고 실제로 화면에 보이는 타일 만 렌더링하는 것입니다. Google지도는 이미지로이 작업을 수행하여 현재 표시되어있는 부분의 이미지 만로드합니다 (스크롤 할 때 화면이 렌더링 될 때까지 기다릴 필요가 없는지 확인하기 위해 화면의 각면을 추가로 추가합니다) 커다란 캔버스가 있다는 환상을 유지하면서 실제로는 창보다 조금 더 크게 렌더링합니다.

Answer 2

HTML5를 구현하는 대부분의 브라우저는 아직 초기 베타 버전이므로 버그를 해결하고있는 것으로 보입니다.

그러나 캔버스의 해상도는 매우 높습니다. 대부분의 사람들의 모니터가 표시 할 수있는 것보다 훨씬 높습니다. 왜 그렇게 큰 이유가 있을까요? 드래그 가능한 영역을 일반적인 디스플레이 해상도와 비슷한 수준으로 제한하지 않는 이유는 무엇입니까?

Answer 3

나는 동일한 문제가있었습니다! 큰 div 캔버스를 사용하여 일부 div를 연결하려고합니다. 결국 나는 포기하고 자바 스크립트를 사용하여 선을 그렸습니다. (작은 이미지를 픽셀로 사용하여 제 선을 그렸습니다. 먼저 div로 해봤지만 IE에서는 div가 너무 컸습니다).