2. 사각형(Rectangle) 그리기

2. 사각형(Rectangle) 그리기

canvas에 사각형을 그리는 것과 관련하여 다음과 같이 3 가지 형태의 메서드들을 이용합니다.

메서드	기능
fillRect(x, y, w, h)	주어진 스타일로 사각형을 칠함
strokeRect(x, y, w, h)	주어진 스타일로 해당 사각형의 외부 라인을 칠함
clearRect(x, y, w, h)	해당 사각형을 투명한 검은색으로 칠함. 실제는 흰색으로 나타남

위에서 x, y, w, h는 방금 전 “colorandstyleEx.html” 예제에서 이해했을 것 같은데요. 각각 x, y는 앞에서 설명한 x, y 좌표를, w는 너비(width), h는 높이(height)를 나타냅니다. 이제 간단한 예제를 해볼까요?
“basic.html” 파일을 메모장을 열어서 “// canvas에 그릴 선이나 도형 작성” 부분에 다음과 같이 3개의 직사각형을 그리는 코드를 작성합니다.

      context.fillStyle = "green";
      context.strokeStyle="blue";

      context.fillRect(0, 0, 150, 50);
      context.clearRect(30, 25, 40, 40);     
      context.strokeRect(30, 25, 40, 40)
      context.fillRect(0, 80, 150, 50);
      context.strokeRect(0, 80, 150, 50);

위와 같이 작성한 후 다른 이름으로 저장을 선택하여 “rectangleEx.html”로 저장한 후 IE9를 통해 연결해보면 다음과 같이 3개의 직사각형이 캔버스(canvas) 안에 나타나게 됩니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.