이 기사는 주로 HTML5 캔버스에서 사각형을 그리는 예를 소개합니다. 이 기사는 세 가지 API를 사용합니다 : FillRect, Strokerect 및 ClearRect. 필요한 친구는 그것을 참조 할 수 있습니다.
이 기사는 기본 사각형 모양 인 Steve Fulton & Jeff Fulton HTML5 Canvas에서 번역되었습니다.
캔버스로 내장 된 간단한 기하학적 모양을 살펴 보겠습니다. 캔버스에는 직사각형을 그릴 수있는 세 가지 방법이 있습니다 : FillRect, Stroke (Strokerect) 및 ClearRect. 물론, 우리는 경로를 사용하여 직사각형을 포함한 모든 그림을 묘사 할 수 있습니다.
위의 세 가지 방법에 대한 API는 다음과 같습니다.
1. FillRect (X, Y, 너비, 높이). (x, y), 너비 및 높이에서 시작하여 단단한 사각형을 그립니다.
2. 스트로커 (x, y, 너비, 높이). (x, y), 너비 및 높이에서 시작하는 직사각형 상자를 그립니다. 직사각형 상자는 현재 세트 스트로커 스타일, linewidth, linejoin 및 miterlimit 속성에 따라 다른 스타일로 렌더링됩니다.
3. ClearRect (X, Y, 너비, 높이). (x, y), 너비 및 높이에서 시작하여 직사각형 영역을 제거하여 완전히 투명하게 만듭니다.
위의 방법을 호출하여 캔버스를 그리기 전에 채우기와 스트로크 스타일을 설정해야합니다. 이 스타일을 설정하는 가장 기본적인 방법은 24 비트 색상 (16 진수 문자열로 표시)을 사용하는 것입니다. 간단한 예는 다음과 같습니다.
코드를 복사하십시오