저는 drawRect를 사용하여 HTML5 캔버스에 많은 수 (~ 20000)의 직사각형을 각각 미리 정해진 위치에서 그립니다. 나는 이것을 루프에서하고있다.
for (var i = 0; i < 100; ++i) {
for (var j = 0; j < 200; ++j) {
context.fillStyle = '#000000';
context.fillRect(i * 8, j * 2, 6, 1);
}
}
이 스 니펫은 각각 6px 너비의 800px 캔버스에 100 개의 막대를 그립니다. 각 막대는 서로 아래에 쌓인 수많은 작은 (1x6) 직사각형으로 구성됩니다. 제공된 예제에서는 정적 개수가 200 개이지만 동적으로 변경됩니다. 내 응용 프로그램에서 계산합니다 (따라서 다시 렌더링해야 함).
이 작업은 수십 밀리 초가 걸리며 그 자체로는 심각한 문제가 아닙니다. 그러나이 전체 프로세스는 반복적으로 호출되어 성능에 큰 영향을 미치며 좋지는 않습니다.
이러한 막대를 하나의 캔버스 명령에 그려서 하드웨어 가속을 훨씬 더 잘 활용할 수있는 솔루션이나 해결 방법이 있습니까?
사각형은 각각 내 앱에서 빛을 발하므로 가로로 자르는 것은 좋은 방법이 아닙니다. 이미 오프 스크린 캔버스를 사용하여 그림을 그리고 메인 캔버스에 이미지 출력을 렌더링하려고 시도했지만 눈에 띄는 성능 향상은 없습니다.
하나의 전체 높이 막대를 포함하는 단일 (오프 스크린) 캔버스 이미지를 만든 다음 각 동적 높이 막대에 대해 필요한 수의 수직 픽셀 만 화면 캔버스에 복사합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다