3. 경로(Path)

3. 경로(Path)

하나의 경로(Path)는 0 또는 하나 이상의 하부 경로들의 리스트입니다. 이러한 하부 경로는 직선, 곡선에 의해 연결되는 하나 또는 둘 이상의 점들의 리스트로 구성됩니다. 이러한 경로는 처음 시작점과 마침점이 같으면 닫힌 경로로 처음 시작점과 마침점이 다르면 열린 경로로 구분합니다. 그러면 경로와 관련된 메서드들에 대해서 알아볼까요?

메서드	기능
beginPath()	현재의 경로를 재설정. 즉 경로의 시작
moveTo()	moveTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표로 이동
closePath()	현재의 경로가 닫혔음을 마킹하고 새로운 경로를 시작
lineTo()	현재의 하부 경로에서 lineTo(x, y) 메서드의 입력 파라미터로 설정된 (x, y) 좌표까지 직선을 그리기
rect()	rect(x, y, w, h)의 입력 파라미터 대로 (x, y) 점을 시작으로 사각형 형태의 하나의 닫힌 경로를 구성
fill()	현재의 fill 스타일로 직선이나 도형 내부의 색상이나 스타일 적용
stroke()	현재의 stroke 스타일로 직선이나 도형 외부 색상이나 스타일 적용
clip()	경로로 선택된 도형을 클립 영역으로 지정. Canvas 내에 클립 영역이 지정되면 추후 다른 그래픽 작업은 클립 영역으로 한정되어 적용됨. 보통 clip() 하기 전에 save() 메서드를 이용하여 canvas 내용 저장한 후 clip() 사용
isPointInPath()	isPointInPath(x, y)에서 (x, y) 점이 현재의 경로상에 존재하는 점이면 참(true)을 그렇지 않으면 거짓(false)을 반환

표에서 설명한대로 하나의 경로를 시작하기 위해서는 beginPath() 메서드를 시작으로 해서 moveTo(), lineTo() 메서드를 이용하여 직선을 그리거나 표에서는 언급하지 않았지만 뒤에서 언급될 quadraticCurveTo(), bezierCurveTo(), arcTo(), arc() 메서드들을 이용하여 다양한 곡선이나 다각형 형태로 경로를 설정한 후 stroke() 메서드를 실행하여 실제 도형이 그리게 됩니다. 이를 정리하면 다음과 같습니다.

beginPath(); //경로의 시작
선, 곡선, 다각형 경로 설정
stroke(); //실제 그리기

이제 “basic.html” 파일을 메모장으로 열어서 “// canvas에 그릴 선이나 도형 작성” 부분 밑에 다음과 같이 코드를 작성합니다.

        // canvas에 그릴 선의 두께(lineWidth)이나 도형의 스타일 설정

           context.strokeStyle = "blue";

           context.fillStyle = "red";

           context.lineWidth = 5;

                               

           //직선 그리기

           context.beginPath();

           context.moveTo(10,10);

           context.lineTo(100,10);

           context.stroke();

                                                               

           //열린 경로 그리기

           context.beginPath();

           context.moveTo(30,100);

           context.lineTo(60,30);

           context.lineTo(90,100);

           context.stroke();

                                                               

           //닫힌 경로 그리기

           context.beginPath();

           context.moveTo(120,100);

           context.lineTo(150,30);

           context.lineTo(180,100);

           context.lineTo(120,100);

           context.closePath();

           context.lineTo(120,150);

           context.stroke();                      

                               

        //rect() 메서드 예

        context.beginPath();

        context.rect(30, 160, 100, 50);

        context.fillStyle = "pink";

        context.fill();

        context.lineWidth = 10;

        context.strokeStyle = "black";

        context.stroke();

위와 같이 작성한 후 다른 이름으로 저장을 이용하여 “pathEx.html”로 저장한 후 웹 브라우저를 통해 열어보면 다음과 같이 직선, 꺽쇠(^) 모양의 열린 경로, 삼각형 모양의 닫힌 경로와 closePath()를 이용한 직선 연결, 마지막으로 rect() 메서드를 이용한 직사각형 형태의 닫힌 경로 형태가 캔버스(canvas) 안에 나타나게 됩니다.

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