LineStyle - lineCap 선의 끝점모양

guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.

guriZzang.com 스터디블로그 바로가기

lineCap

선의 끝점 보양을 결정.

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

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

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

선 그리기

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');   var lineCap = ['butt','round','square'];     // Draw guides   ctx.strokeStyle = '#09f';   ctx.beginPath();   ctx.moveTo(10,10);   ctx.lineTo(140,10);   ctx.moveTo(10,140);   ctx.lineTo(140,140);   ctx.stroke();     // Draw lines   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();   } }

DEMO