lineCap 속성

lineCap 속성은 선 끝의 모양을 지정합니다. 다음 값들을 가질 수 있습니다: butt - 평평한 끝 (기본값), round - 둥근 끝, square - 사각형 끝.

구문

context.lineCap = 'butt' 또는 'round' 또는 'square';

예시

몇 개의 선을 그려보고 첫 번째에는 butt 값을, 두 번째에는 round 값을, 세 번째에는 square 값을 설정해 봅시다. 빨간 선(선의 설정된 시작점을 표시함)에 주목해 주세요 - round와 square는 이를 넘어서 돌출됩니다:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.moveTo(75, 50);
ctx.lineTo(75, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(105, 50);
ctx.lineTo(105, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'square';
ctx.moveTo(135, 50);
ctx.lineTo(135, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = 'red';
ctx.moveTo(60, 50);
ctx.lineTo(150, 50);
ctx.stroke();

같이 보기

선 꺾임 스타일을 지정하는 속성 lineJoin,
날카로운 모서리의 길이를 제한하는 속성 miterLimit,
선 끝 모양을 지정하는 속성 lineCap,
선 두께를 지정하는 속성 lineWidth,