Develop/canvas

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

GuriZzang 2015. 8. 10. 15:25

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