html5의 캔버스 요소(직사각형, 폴리선, 원 그리기) 사용 방법 소개

캔버스는 일반적으로 캔버스를 의미합니다. 최근 HTML5를 사용하여 게임을 작성하는 데 관심이 많아져서 그냥 캔버스를 사용했습니다.

저는 이전에 Silverlight와 wpf에서 Canvas를 사용한 적이 있습니다. Silverlight에서 Canvas는 절대 위치 컨테이너이며 모든 컨트롤이 그 안에 배치될 수 있습니다. 그를 통해 캔버스, 그래픽 애플리케이션, GIS 애플리케이션 등을 구축할 수 있습니다.

HTML5에서는 캔버스가 새로운 태그입니다.

코드 복사

코드는 다음과 같습니다.

기본 html 태그의 모든 속성을 갖고 있으며 스타일도 설정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

또한 특정 속성이 있습니다:

코드 복사

코드는 다음과 같습니다.

여기서 높이와 너비는 이전과 동일합니다. html 태그의 속성이 다르며, 스타일의 높이와 너비도 다릅니다. 이는 주로 캔버스 내 좌표 범위를 나타냅니다. 스타일의 너비와 높이는 캔버스의 실제 표시 크기를 나타냅니다.

예를 들어 다음 캔버스를 정의합니다.

코드 복사