HTML5 Canvas가 그리기 순서를 유지하지 않습니다.

Question

캔버스에 건물의 대략적인 윤곽을 그리려합니다. 각면에 대해 일련의 사각형을 만들고 상단의 '지붕'을 만든 다음 기본적으로 Painter의 알고리즘에 따라 순차적으로 그려서 효과를 얻고 있습니다.

왼쪽의 스크린 샷은 어떻게 보이는지 보여줍니다. 이것은 각 사각형을 별도로 그림입니다.

성능을 향상 시키려면 가능한 한 모든 .stroke() 및 .fill() 호출을 사용하여 모든 moveTo() 및 lineTo() 호출을 큐에 넣고 한 번에 모두 그려야합니다. 테스트 결과 최소한의 성능 향상을 가져 왔으며 직접 확인했습니다.

불행히도 오른쪽 스크린 샷에서 볼 수 있듯이 건물을 한 번만 칠하면 레이어링이 기본적으로 파괴됩니다. 그것은 무작위 순서로 일을 칠합니다.

캔버스가 이런 식으로 작동합니까? 첫 번째 스크린 샷과 같이 드로잉 할 때 모든 것을 그려 내지 않는 이유는 무엇입니까? 누구든지이 문제에 대해 좋은 해결책을 알고 있습니까? 당신이 그것을 보내는 경우 당신은 당신이 모든 내부를보고 싶어 할 위치 (하나 개의 큰 모양을 렌더링하는 것처럼

Answer 1

모든 moveTos 및 lineTos는 등 하나 개의 큰 배치, 그들을 잡아 것 스트로크).

여러 그리기 작업을 실행하는 데 약간의 성능 저하가 있지만 코드를 이해하고 디버그하는 것이 더 힘들지 않습니다.