HTML <canvas> lineCap - 선 끝점 모양 설정하기

선 모양 설정하기

lineWidth = value	이후 그려질 선의 두께를 설정합니다.
lineCap = type	선의 끝 모양을 설정합니다.
lineJoin = type	선들이 만나는 "모서리"의 모양을 설정합니다.
miterLimit = value	두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.
getLineDash()	음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.
setLineDash(segments)	현재 선의 대시 패턴을 설정합니다.
lineDashOffset = value	선의 대시 배열이 어디서 시작될지 지정합니다.

 

 

 

lineCap = type

lineCap 속성은 그리려는 모든 선의 끝점 모양을 결정합니다.

butt, round, square 세 가지 값을 가지며, 초기 설정값은 butt입니다.

 

• butt   : 선의 끝이 좌표에 딱 맞게 잘립니다.
• round   : 선의 끝이 동그랗습니다.
• square   : 선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.

 

아래의 예제에서는, 각기 다른 lineCap 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이게 하기 위해서 안내선이 추가로 그려집니다. 세개의 선 모두 이 안내선 위에 시작과 종료 좌표가 있습니다.

 

맨 왼쪽에 있는 선은 초기 설정값인 butt을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데 있는 선은 round를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 aquare를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.

 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  // 안내선을 그린다
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(140, 10);
  ctx.moveTo(10, 140);
  ctx.lineTo(140, 140);
  ctx.stroke();

  // 선을 그린다
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25 + i * 50, 10);
    ctx.lineTo(25 + i * 50,140);
    ctx.stroke();
  }
}

 

결과 화면