15. lineStyle - lineJoin 선의 연결지점(모서리)의 모양

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

http://gurizzang.com/view/board/bbsView.asp?menuCode=45&bbsCode=36&bbsSeq=1140

lineJoin

도형을 이루는 선이나 호등의 연결지점(모서리)의 모양을 설정

• round
  
• 설명 : 도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 
• 이때 원의 반지름은 선의 두께와 같습니다.
• bevel
  
• 설명 : 도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.
• miter
  
• 설명 : 도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. 
• miterLimit 속성값에 따라 모양이 달라집니다.

lineJoin 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외됩다.

이 속성에는 세 가지 값이 있는데, round, bevel, miter이며, 초기 설정값은 miter입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, lineJoin을 설정해도 아무런 효과가 나타나지 않습니다.

아래 예제는 세개의 경로를 그리며 각각 다른 lineJoin 속성값을 가집니다.

말풍선 그리기

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');   var lineJoin = ['round','bevel','miter'];   ctx.lineWidth = 10;   for (var i=0;i<lineJoin.length;i++){     ctx.lineJoin = lineJoin[i];     ctx.beginPath();     ctx.moveTo(-5,5+i*40);     ctx.lineTo(35,45+i*40);     ctx.lineTo(75,5+i*40);     ctx.lineTo(115,45+i*40);     ctx.lineTo(155,5+i*40);     ctx.stroke();   } }

DEMO