[Canvas] canvas 5. 도형 그리기

그리드 

도형을 그리기전에 우리는 먼저 캔버스의 그리드 혹은 좌표공간에대해서 이해할 필요가 있습니다.

html의 기본 캔버스는 150*150 사이즈를 가진다고 이전에 설명하였습니다.

우리가 알고있는 일반적인 수학의 2차원 평면은 가로 세로 (편의상 X Y 라고 하겠습니다.) 축을 가지고있고

시작점은 좌측 하단에 위치해 있습니다만. 

html의 기본 좌표는 화면의 좌측 상단에 시작점을 가지고 있습니다. 

아래의 이미지를 보시면 이해가 쉬우실것같습니다.

[출처] 모질라 디벨로퍼 센터

위의 특이점만 이해하신다면 화면상의 좌표 계산에는 큰 어려움이 없겠습니다.

도형그리기

SVG와 다르게 캔버스는 매우 원시적인형태인 사각형 도형만을 지원합니다. 다른 도형들은 하나이상의

경로들을 조합하여 만들어야만하지요. 

하지만 다행스럽게도 우리는 이런 복잡한 도형들을 그리기위한 많은 다양한 함수들을 가지고 있습니다.

사각형

사각형을그려보기전에 먼저 세가지 함수를 살펴보도록 하겠습니다.

fillRect(x,y,width,height) : 색칠된 사각형을 그립니다.
strokeRect(x,y,width,height) : 사각형태의 아웃라인을 그립니다.
clearRect(x,y,width,height) : 특정영역을 완전히 투명하게 지웁니다.

세가지 함수는 각각 같은 파라메터를 가지고있습니다 x,y 는 위에서 설명한 캔버스 좌상단을 원점으로한

좌표를 말하고 width, height는 각 사각형의 크기를 말해줍니다.

그럼 세가지 함수를 사용하는 간단한 예제를 보도록 하겠습니다.

예제보기

1. function draw(){  
2.   var canvas = document.getElementById('canvas');  
3.   if (canvas.getContext){  
4.     var ctx = canvas.getContext('2d');  
5.   
6.     ctx.fillRect(25,25,100,100);  
7.     ctx.clearRect(45,45,60,60);  
8.     ctx.strokeRect(50,50,50,50);  
9.   }  
10. }  

먼저 fillRect함수로 까만 100*100 사이즈의 검은사각형을 그려주었습니다.

그리고 clearRect 함수로 검은 사각형의 내부에 60*60 사이즈만큼 배경을 지워준뒤에

그안에 50*50 사이즈의 사각형 라인을 그려넣은겁니다.