lineCap 속성

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

구문

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

예시

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

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

javascriptlet 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();

Результат:

같이 보기