html5의 캔버스 요소(직사각형, 폴리선, 원 그리기) 사용 방법 소개_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:48:021344검색
캔버스는 일반적으로 캔버스를 의미합니다. 최근 HTML5를 사용하여 게임을 작성하는 데 관심이 많아져서 그냥 캔버스를 사용했습니다.
저는 이전에 Silverlight와 wpf에서 Canvas를 사용한 적이 있습니다. Silverlight에서 Canvas는 절대 위치 컨테이너이며 모든 컨트롤이 그 안에 배치될 수 있습니다. 그를 통해 캔버스, 그래픽 애플리케이션, GIS 애플리케이션 등을 구축할 수 있습니다.
HTML5에서는 캔버스가 새로운 태그입니다.
코드 복사
코드는 다음과 같습니다.기본 html 태그의 모든 속성을 갖고 있으며 스타일도 설정할 수 있습니다.
코드 복사
코드는 다음과 같습니다.
또한 특정 속성이 있습니다:
코드 복사
코드는 다음과 같습니다.여기서 높이와 너비는 이전과 동일합니다. html 태그의 속성이 다르며, 스타일의 높이와 너비도 다릅니다. 이는 주로 캔버스 내 좌표 범위를 나타냅니다. 스타일의 너비와 높이는 캔버스의 실제 표시 크기를 나타냅니다.
예를 들어 다음 캔버스를 정의합니다.
코드 복사
코드는 다음과 같습니다. 그런 다음 캔버스에 좌표 100과 50, 크기 200과 150으로 직사각형을 그립니다. 실제 효과는 아래와 같습니다.
사진 속 캔버스의 크기는 스타일에 따라 600px * 450px로 결정되는데, 캔버스 전체를 채우는 좌표는 괄호 안의 크기에 해당하는 400*300뿐입니다.
캔버스 그리기는 좌표 기준이므로 100, 50의 좌표가 150px, 75px의 화면 좌표로 변환되고, 직사각형의 크기도 200*150에서 화면 크기 300px*225px로 변환됩니다.
아래 코드를 따라 직접 시도해 볼 수 있습니다.
코드 복사
코드는 다음과 같습니다.