1-2-2.직선

캔버스에 직접적으로 그릴 수 있는 도형은 사각형뿐이다. 나머지 도형은 직접 출력하지 않고 패스에 좌표 정보를 모아 두었다가 한꺼번에 그려야 한다. 패스는 도형의 좌표 정보만을 가지는 객체이며 여러 개의 직선, 곡선은 물론이고 분리된 도형도 하나의 패스로 포함할 수 있다.

도형을 개별적으로 출력하는 것에 비해 패스에 모았다가 한번에 출력하면 그리기 속도가 빠르다는 이점이 있고 연결된 선이 매끄럽게 그려진다. 패스를 시작할 때는 다음 메서드를 호출한다.

beginPath();

beginPath 메서드는 기존의 패스를 제거하고 완전히 비어 있는 새로운 패스를 준비한다. 이후 패스의 도형을 추가하는 메서드를 호출하여 도형의 좌표 정보를 패스에 수집한다. 패스에 도형을 추가한다고 해서 화면에 바로 그려지는 것은 아니다. 패스 내부에 도형의 정보만 저장할 뿐이다. 그릴 도형을 모두 정의했으면 다음 두 메서드를 호출하여 패스를 그린다.

stroke()

fill();

stroke 메서드는 패스의 외곽선만 그리고 fill 메서드는 패스의 안쪽을 채우되 패스가 닫히지 않았으면 닫은 후 채운다. 패스를 강제로 닫으려면 다음 메서드를 호출한다.

closePath();

패스로 도형을 출력하는 일반적인 절차는 다음과 같다.

beginPath();

// 여기서 원하는 도형을 그린다.

stroke() 또는 fill();

beginPath ~ stroke 사이에 도형 출력문을 넣는다. 개수에 상관없이 얼마든지 많은 도형을 추가할 수 있다. 도형은 패스에 일단 추가되어 좌표 정보만 기록되며 stroke나 fill에 의해 한꺼번에 그려진다. 직선을 그을 때는 다음 두 메서드를 사용한다.

moveTo(x, y)

lineTo(x, y)

moveTo는 현재 좌표만 이동하며 선을 긋지는 않는다. 선의 시작 좌표만 지정할 뿐이다. lineTo는 현재 좌표에서 인수로 전달받은 좌표까지 선을 긋는다. 선을 그은 후 현재 좌표를 끝으로 이동시키므로 lineTo를 계속해서 호출하면 선을 이어서 그릴 수 있다. 다음 예제는 패스와 moveTo, lineTo로 직선 하나를 그린다. 패스를 이용해 뭔가를 그리는 가장 간단한 코드이다.

drawline.html

function draw() {

ctx.beginPath();

ctx.moveTo(10, 10);

ctx.lineTo(300, 150);

ctx.stroke();

}

beginPath로 패스를 열었다. 이후 패스에 도형을 추가하는 메서드를 호출한다. moveTo로 시작점을 (10, 10)으로 옮기고 lineTo로 (300, 150)까지 선을 긋는다. 아직까지 선이 화면에 출력된 것은 아니며 패스에 선을 구성하는 좌표만 기록한 것이다. 이렇게 정의된 직선은 stroke 메서드에 의해 화면으로 출력된다.

패스에 도형 정보를 추가하는 메서드는 실제 출력을 하는 것은 아니지만 결국에는 화면에 그려진다. 출력하지 않을 도형을 패스에 추가하지는 않을 것이다. 그래서 lineTo가 선을 긋는다고 생각해도 무방하다. 이후 패스에 도형을 추가하는 메서드를 설명할 때는 그냥 "그린다"라는 표현을 쓸 것이다.

직선이라는 간단한 도형 하나를 그리는데 코드가 무려 4줄이나 필요하다. 패스 열고 시작점, 끝점 따로 지정하고 최종적으로 패스를 그려야 하니 너무 번거롭다는 생각이 들 것이다. 그러나 매번 직선을 그릴 때마다 이 과정을 반복할 필요는 없다. 이럴 때 쓰라고 있는 장치가 바로 함수이다. 함수 하나 정의해 놓으면 필요할 때 언제든지 호출해서 한줄로 직선을 그을 수 있다.

drawline2.html

function drawLine(sx, sy, ex, ey)

{

ctx.beginPath();

ctx.moveTo(sx, sy);

ctx.lineTo(ex, ey);

ctx.stroke();

}

function draw() {

drawLine(10, 10, 300, 150);

}

drawLine 함수는 두 점의 좌표를 받아 선을 긋는다. 이 함수로 최소한의 직선 정보만 전달하면 직선을 편리하게 그을 수 있다. 캔버스는 HTML 처럼 태그를 배치해서 도형을 그리는 것이 아니라 코드로 제어하므로 반복, 분기, 조건, 배열 처리가 가능하다. 프로그래밍 장치를 얼마든지 활용할 수 있기 때문에 캔버스가 유연하고 강력한 것이다.

이런 래퍼 함수를 만들어 사용하는 것은 아주 상식적이다. 그러나 일반 함수여서 컨텍스트의 멤버가 아니며 ctx가 전역이 아니라면 인수로 전달받아야 한다는 면에서 strokeRect 같은 메서드와는 다르다. 메서드처럼 사용하려면 프로토타입에 메서드를 추가해야 한다. 코드를 다음과 같이 수정해 보자.

drawline3.html

CanvasRenderingContext2D.prototype.drawLine = function(sx, sy, ex, ey)

{

this.beginPath();

this.moveTo(sx, sy);

this.lineTo(ex, ey);

this.stroke();

}

function draw() {

ctx.drawLine(10, 10, 300, 150);

}

이렇게 하면 컨텍스트에 메서드가 추가되어 기존의 메서드와 동일한 방법대로 사용할 수 있다. 마치 drawLine이라는 메서드가 원래 컨텍스트에 있었던 함수처럼 호출할 수 있다.

캔버스는 원자적으로 꼭 필요한 메서드만 제공하며 편의 메서드가 별로 없다. 필요하다면 이 방식으로 컨텍스트를 확장하면 된다. 자바스크립트의 확장 기능을 적절히 사용한 예이며 더 필요한 메서드를 얼마든지 추가할 수 있다. 잘 정의된 함수 집합을 별도의 js 파일로 묶어 두면 코드 선두에서 스크립트를 불러 들여 자유롭게 사용할 수 있다. 마치 jQuery 처럼 말이다.