HTML5 Canvas Shapes 1

오늘은 Canvas를 이용하여 각종 도형을 그려보자.

우선 아래와 같은 사각형을 그려보자.

Canvas는 사격형을 그리기 위한 rect 메서드를 지원한다.

context.rect(topLeftCornerX,topLeftCornerY,width,height);

 

rect 메서드를 이용하여 사각형을 그린 소스는 아래와 같다.

6번라인은 rect 메서드를 이용하여 위 그림과 같이 X, Y좌표로 이동하여 width, height 각각 100px의 사각형을 그리게 된다. 7번 라인은 사각형의 배경색을 지정하기 위한 fillStyle 프로퍼티이다. fileStyle에 #000의 배경색을 지정하였다. 8번 라인은 fillStyle로 지정된 배경색을 채우기 위한 명령어 fill 메서드이다. stroke 메서드와 마찬가지로 이 명령어를 작성하지 않으면 배경색이 지정되지 않으니 꼭 명심해야 한다.
9번라인은 라인두께를 지정하고 10번 라인은 선의 색깔지정한다. 11번 라인은 stroke 메서드로 선을 그리게 된다.


다음은 아래와 같은 원을 그려보자.

Canvas는 원을 그리기 위한 몇가지 메서드를 지원하고 있다.
오늘은 arc 메서드를 사용해보겠다.

context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

arc 메서드의 인자에 대해서 간략히 설명하면 centerX, centerY는 그리기 위한 원의 center point이다.
redius는 반지름이며, startingAngle은 원을 그리기 위한 시작점이며 endingAngle 원의 끝점이다.
antiClockwise는 boolean타입이며 true일 경우 시계방향으로 원을 그리고 false일 경우 시계반대 방향으로 그리게 된다.

 

6번 라인의 arc 메서드를 사용한 부분을 제외하고는 사각형 그리기와 동일하다.
arc 메서드를 이용하여 원의 중앙 점 좌표 70,70를 찾아 간 후 반지름 50의 원을 시작점 0에서 끝점은 360도의 원형을 그리기 위하여 Math.PI를 사용하였다.
 

이젠 사각형도 그렸고 원도 그렸으니 삼각형도 한번 그려보자.
Canvas는 삼각형을 지원하는 메서드는 존재하지 않는다.
하지만 moveTo, lineTo 메서드만 알면 못 그릴게 없으니.. 아래와 같은 삼각형을 그려보자.

6번 라인부터 8번 라인까지 라인을 그린 후 9번 라인에 처음 보는 녀석이 있다. closePath 메서드이다.
이 녀석은 마지막 선에서 시작 점으로 돌아간다.
위 소스를 유심히 보면 마지막 선에 대한 lineTo 메서드 대신 closePath 메서드를 사용한 걸 알 수 있다.