이 기사는 주로 계층화 된 캔버스를 사용하여 HTML5 렌더링을 최적화하는 자습서를 소개합니다. 공식 IBM 웹 사이트 개발자의 기술 문서에서 비롯됩니다. 필요한 친구는 다음 소개를 참조 할 수 있습니다.
일반적으로, 2D 게임을하거나 HTML5 캔버스를 렌더링 할 때는 여러 층을 사용하여 합성 장면을 구축하려면 최적화를 수행해야합니다. OpenGL 또는 WebGL과 같은 저수준 렌더링에서 렌더링은 프레임별로 장면 프레임을 청소하고 그리기하여 수행됩니다. 렌더링이 구현 된 후 게임은 렌더링의 양을 줄이기 위해 최적화되어야하며 필요한 비용은 상황마다 다릅니다. 캔버스는 DOM 요소이므로 여러 캔버스를 최적화 방법으로 겹칠 수 있습니다.
일반적인 약어
DOM : 문서 개체 모델
HTML : 하이퍼 텍스트 마크 업 언어 (하이퍼 텍스트 마크 업 언어)
이 기사는 레이어링 캔버스의 합리성을 탐구합니다. 층 캔버스를 활성화하기 위해 DOM 설정을 이해하십시오. 계층 적 최적화를 사용하려면 다양한 관행이 필요합니다. 이 기사는 또한 계층 적 접근을 확장하는 최적화 전략을위한 몇 가지 개념과 기술을 탐구합니다.
이 기사에 사용 된 예제의 소스 코드를 다운로드 할 수 있습니다.
최적화 전략을 선택하십시오
최적의 최적화 전략을 선택하는 것은 어려울 수 있습니다. 계층 적 시나리오를 선택할 때는 시나리오가 구성되는 방법을 고려해야합니다. 대형 화면에서 고정 객체를 렌더링하려면 종종 여러 구성 요소를 재사용해야하며, 이는 연구 후보자입니다. 시차 또는 애니메이션 엔티티와 같은 효과에는 종종 다양한 화면 공간이 필요합니다. 최적의 최적화 전략을 탐색 할 때 이러한 상황에주의를 기울이는 것이 가장 좋습니다. 캔버스의 계층 적 최적화에는 여러 가지 기술이 필요하지만 이러한 기술을 올바르게 적용한 후에 성능이 크게 향상됩니다.
설정 레이어
계층 적 방법을 사용할 때 첫 번째 단계는 DOM에서 캔버스를 설정하는 것입니다. 일반적으로 이것은 간단하고 캔버스 요소를 정의하고 DOM에 넣지 만 캔버스 레이어에는 여분의 스타일이 필요할 수 있습니다. CSS를 사용하는 경우 캔버스 계층 구조를 성공적으로 구현하기위한 두 가지 요구 사항이 있습니다.
각 캔버스 요소는 뷰포트에서 동일한 위치에 공존해야합니다.
각 캔버스는 다른 캔버스 아래에서 볼 수 있어야합니다.
그림 1은 레이어 설정 뒤의 일반적인 중첩 개념을 보여줍니다.
그림 1. 레이어 예제
레이어를 설정하는 단계는 다음과 같습니다.
계층 구조를 지원하기 위해 캔버스 요소 포지셔닝 스타일을 추가하십시오.
투명한 배경을 생성하기 위해 캔버스 요소를 스타일링하십시오.
캔버스 오버랩 스택을 설정하십시오
CSS에서 오버레이 스택을 생성하려면 소량의 스타일이 필요할 수 있습니다. HTML 및 CSS를 사용하여 겹치는 방법에는 여러 가지가 있습니다. 이 기사의 예제는 <div> 태그를 사용하여 캔버스를 포함합니다. <div> 태그는 Listing 1에 표시된 것처럼 스타일을 자식 HTML5 캔버스 요소에 적용하는 고유 한 ID를 지정합니다.
목록 1. 캔버스 포지셔닝 스타일
CSS 코드 복사 컨텐츠를 클립 보드에 복사합니다