도형 그리기 1

* 기본적인 그리기

 

[선과 칠하기 스타일]

 

프로퍼티	기능
strokeStyle	선의 색이나 스타일을 지정하거나 구함. 지정 방법은 CSS와 똑같음.
fillStyle	칠할 색이나 스타일을 지정하거나 구함. 지정 방법은 CSS와 똑같음.

 

[사각형]

 

메서드	기능
strokeRect(x, y, w, h);	사각형을 그림.  x와 y에 좌표를, w와 h에 폭과 높이를 대입함.
fillRect(x, y, w, h);	사각형을 칠함.  x와 y에 좌표를, w와 h에 폭과 높이를 대입함.
clearRect(x, y, w, h);	사각형 영역을 제거함. (투명으로 돌아감)  x와 y에 좌표를, w와 h에 폭과 높이를 대입함.

 

- 예)

<script>
function draw() {
    var canvas = document.getElementById("canvas1");
    if(canvas.getContext) {
        var cvs = canvas.getContext("2d");
        cvs.strokeRect(50, 50, 150, 150);     // 바깥쪽 사각형을 그림.
        cvs.fillStyle="#ee8888";            // fillStyle 프로퍼티로 색을 지정하고, 하나 작은 사각형을 그림.
        cvs.fillRect(75, 75, 100, 100);        
        cvs.clearRect(100, 100, 50, 50);    // clearRect 메서드로 중심 부분의 사각형을 제거함.
    }
}
</script>

 

[텍스트 관련]

 

메서드	기능
strokeText(text, x, y [, maxWidth]);	텍스트의 윤곽선을 그림.  text에는 표시하고 싶은 텍스트를, x와 y에는 좌표를 지정함.  maxWidth로 가로 폭의 최대값도 지정할 수 있음.
fillText(text, x, y [, maxWidth]);	텍스트를 그림.  text에는 표시하고 싶은 텍스트를, x와 y에는 좌표를 지정함.  maxWidth로 가로 폭의 최대값도 지정할 수 있음.

 

프로퍼티	기능
font	글꼴의 크기 및 종류를 지정하거나 구할 수 있음.  지정 방법은 CSS와 똑같음.  기본값은 "7.5pt sans-serif"임.

 

- 예)

cvs.strokeStyle="#ff0000";

cvs.font="15pt sans-serif";

cvs.strokeText("HTML5가 보이는 그림책", 90, 90, 300);

cvs.fillStyle="#ff0000";

cvs.fillText("HTML5가 보이는 그림책", 90, 130, 300);

 

프로퍼티	기능
textAlign	strokeText() 메서드나 fillRect() 메서드에서 정한 x 좌표의 위치가 텍스트에서 어떤 위치가 될 것인지를 설정함.  값은 "start", "end", "left", "center", "right"를 지정할 수 있음.
textBaseline	strokeText() 메서드나 fillText() 메서드에서 정한 y 좌표의 위치가 텍스트에서 어떤 위치가 될 것인지를 설정함.

 

- textAlign 프로퍼티로 지정할 수 있는 값

start : 문자의 처음 위치 (기본값)

end : 문자의 마지막 위치

left : 문자의 왼쪽 끝

center : 문자의 중심

right : 문자의 오른쪽 끝

 

- textBaseline 프로퍼티로 지정할 수 있는 값

top : em 스퀘어의 상단

hanging : 위를 맞추는 타입의 언어용 베이스라인

middle : em 스퀘어의 중심

alphabetic : 알파멧의 베이스라인 (기본값)

ideographic : 한자 등 표의 문자의 베이스라인

bottom : em 스퀘어의 하단

 

(em 스퀘어 : 대문자 M을 표시했을 때 차지하는 사각형)

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)