2-1-4.선의 모양

선의 모양을 지정하는 속성도 여러 가지가 있다. 우선 lineWidth 속성은 선의 굵기를 지정하는데 디폴트는 1픽셀이다. 이 속성을 변경하면 외곽선이 두꺼워진다.

linewidth.html

function draw() {

ctx.strokeRect(10,10,90,90);

ctx.lineWidth=5;

ctx.strokeRect(110,10,90, 90);

ctx.lineWidth=10;

ctx.strokeRect(210,10,90, 90);

}

세 가지 굵기로 바꿔 가며 사각형을 그렸다. 아무 지정이 없을 때는 디폴트인 �薦� 선으로 그려지며 5나 10으로 바꾸면 그만큼 획이 굵어진다. 굵어진 획은 도형의 안쪽과 바깥쪽으로 절반씩 확장된다.

선이 굵어지면 선의 끝도 면적이 되어 모양을 지정할 수 있다. lineCap 속성은 선의 끝모양을 지정하는데 butt, round, square 중 하나를 지정한다. 다음은 20픽셀의 충분한 굵기로 끝 모양을 바꿔가며 선을 그린다.

linecap.html

function draw() {

ctx.lineWidth=20;

ctx.lineCap="butt";

ctx.beginPath();

ctx.moveTo(20, 20);ctx.lineTo(200, 20);

ctx.stroke();

ctx.lineCap="round";

ctx.beginPath();

ctx.moveTo(20, 70);ctx.lineTo(200, 70);

ctx.stroke();

ctx.lineCap="square";

ctx.beginPath();

ctx.moveTo(20, 120);ctx.lineTo(200, 120);

ctx.stroke();

}

butt는 지정한 좌표까지만 선이 그어지지만 round와 square는 선의 끝 좌표보다 조금 더 확장된다.

lineJoin은 선이 만나는 지점의 모양을 지정한다. 사각형처럼 각이 지는 도형의 모서리 모양을 지정할 수 있다. bevel, round, miter 중 하나를 지정하며 디폴트는 miter이다.

linejoin.html

function draw() {

ctx.lineWidth=20;

ctx.lineJoin="bevel";

ctx.strokeRect(20,20,60,60);

ctx.lineJoin="round";

ctx.strokeRect(120,20,60,60);

ctx.lineJoin="miter";

ctx.strokeRect(220,20,60,60);

}

선 굵기를 20픽셀로 충분히 두껍게 하여 모서리 모양을 분명히 볼 수 있도록 했다. bevel은 모서리 부분을 비스듬이 잘라낸 모양이며 round는 둥글게 처리한다.

miter일 경우 miterLimit 속성으로 마이터 한계값을 지정하여 너무 뾰족해지지 않도록 한다. 선이 굵은 상태에서 두 선의 각도가 좁아지면 선의 끝이 너무 멀리 갈 수 있는데 이 한계를 지정함으로써 선의 연장을 일정 정도 제한하는 역할을 한다.