지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > html5의 캔버스 요소(직사각형, 폴리선, 원 그리기) 사용 방법 소개_html5 튜토리얼 기술

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

WBOY
풀어 주다： 2016-05-16 15:48:02
원래의
1362명이 탐색했습니다.

캔버스는 일반적으로 캔버스를 의미합니다. 최근 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로 변환됩니다.

아래 코드를 따라 직접 시도해 볼 수 있습니다.


코드 복사
코드는 다음과 같습니다.




저자별 최신 기사
최신 이슈
웹사이트에서 입력 요소를 가져올 수 없습니다. 그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요. 다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...
에서 2024-04-06 16:25:39
0
1
346
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
고정 위치의 자식이 부모의 패딩을 무시함 고정 요소가 헤더 뒤로 이동하는 것을 방지하는 방법은 무엇입니까? 현재 코드 조각은 상위 항목에 padding-top을 사용합니다. 또한 추가 하위 항목에 mar...
에서 2024-04-06 11:42:51
0
1
338
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿