HTML5 Canvas_html5 튜토리얼 팁의 직사각형 그리기 예

이 기사는 Steve Fulton과 Jeff Fulton HTML5 Canvas, 2장, "기본 직사각형 모양"을 번역한 것입니다.

캔버스에 내장된 단순한 기하학적 모양인 직사각형 그리기를 살펴보겠습니다. Canvas에는 사각형을 그리는 방법에는 채우기(fillRect), 획(StrokeRect), 지우기(clearRect)의 세 가지 방법이 있습니다. 물론 직사각형을 포함한 모든 그래픽을 설명하기 위해 "경로"를 사용할 수도 있습니다.

위 3가지 메소드의 API는 다음과 같습니다.

1.fillRect(x,y,너비,높이). 너비 너비와 높이 높이를 사용하여 (x, y)에서 시작하는 솔리드 직사각형을 그립니다.
2.StrokeRect(x,y,너비,높이). (x, y)에서 시작하여 너비가 너비이고 높이가 높이인 직사각형 상자를 그립니다. 직사각형 상자는 현재 설정된 스트로크 스타일, lineWidth, lineJoin 및 miterLimit 속성에 따라 다양한 스타일로 렌더링됩니다.
3.clearRect(x,y,너비,높이). (x, y)부터 너비, 너비, 높이로 직사각형 영역을 지워 완전히 투명하게 만듭니다.

캔버스를 그리기 위해 위 메소드를 호출하기 전에 채우기 및 획 스타일을 설정해야 합니다. 이러한 스타일을 설정하는 가장 기본적인 방법은 24비트 색상(16진수 문자열로 표시)을 사용하는 것입니다. 다음은 간단한 예입니다.

코드 복사

코드는 다음과 같습니다.

context.fillStyle = "#000000";
context.strokStyle = "#ff00ff";

아래 예에서는 채우기 색상이 검은색으로 설정되고 획 색상이 설정되었습니다. 보라색으로 :

코드 복사

코드는 다음과 같습니다.

function drawScreen( ) {
context.fillStyle = "#000000";
context.StrokeStyle = "#ff00ff";
context.lineWidth = 2;
context.fillRect(10, 10, 40, 40) ;
context .strokRect(0, 0, 60, 60);
context.clearRect(20, 20, 20, 20);
}

코드 실행 결과 아래와 같습니다: