[Canvas] 선을 그리는 다양한 방법들 - 직선

Canvas에서 가장 기본적인 드로잉 개체는 역시 '선'일 것이다. 선은 크게 직선과 곡선으로 나뉘는데, 먼저 직선부터 살펴보고자 한다.

직선을 그릴 때에는 간단하게 lineTo라는 메소드를 사용하면 된다. 직선을 그릴 때 필요한 것은 시작점과 끝점인데, 시작점은 현재위치가 되므로, lineTo 메소드는 끝점의 좌표만을 인자로 한다. 즉, lineTo(x,y)를 하면 x,y를 향해 선을 그리게 된다. 시작점은 (0,0)이 기본인데, 아무 것도 그리지 않고 시작점을 그리기 위해서 moveTo를 사용할 수 있다. Canvas의 호출부터 하면 아래와 같다. (HTML 문법)

<canvas id="myCanvas" width="100px" height="100px">
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.moveTo(10,10);
ctx.lineTo(90,90);
</script>

(10,10)에서 (90,90)으로 선을 그렸는데 아무 것도 보이지 않는다. 선의 색깔과 그리기 명령이 빠졌기 때문이다. 재미있는 것은 선을 그릴 때 'line'이라는 명령으로 그림을 그렸는데 이러한 색깔과 그리기 명령에는 line이 아닌 stroke가 쓰인다. 그리는 것은 관념적인 '선'이지만, 그것을 표현하는 것은 '획'이라는 점이다.

<canvas id="myCanvas" width="100px" height="100px">
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.moveTo(10,10);
ctx.lineTo(90,90);
ctx.stroke();
</script>

context를 초기화하는 beginPath() 메소드와 획 색상, 선 폭을 정한 후 마지막에 stroke(path)를 통해 그리기 명령을 내리면 정해진 대로 아래의 선이 그려진다.

선의 두께(폭)를 정할 때는 strokeWidth가 아니라 lineWidth인 것도 주의할 점이다. 선의 폭으로 획을 그린다는 것인데, 사실 좀 헷갈리기 쉽게 통일되지 않은 측면이 있다.

선의 속성을 정의할 수 있는 메소드가 더 있는데, 모아서 정리하면 아래의 목록과 같다.

• lineWidth : 선의 폭을 정의한다. 기본값은 1이다.
• lineCap : 선의 끝을 처리하는 옵션으로, 기본은 'butt'이다. 기본값에서는 정해진 길이만큼 잘린다. 'square'에서는 길이의 양 끝에 두께만큼의 사각형이 만들어져 정해진 길이보다 살짝 넘어가며, 'round'는 길이의 양 끝에 두께만큼의 원을 만든다.
• lineJoin : 선 끼리 만나는 점을 어떻게 처리할 지 정할 수 있다. 기본은 'miter'인데, 선의 두께만큼 뾰족한 연결점이 만들어진다. 'round', 'bevel'의 옵션이 있다.
• strokeStyle : 획의 양식을 정의한다. 기본적으로 색상을 CSS의 color 속성과 동일하게 넣을 수 있으며, gradient 등 스타일을 정의하여 매치할 수도 있다.

직선은 상대적으로 그리는 데 계산이 복잡하거나 방법이 어렵지 않아 비교적 쉽게 접할 수 있다. 다음에 다룰 곡선에서 본격적으로 선 드로잉의 어려움이 시작될 예정이다.