lineJoin 속성

lineJoin 속성은 두 선을 연결하는 방식을 설정합니다. 다음 값을 가질 수 있습니다: miter - 날카로운 각도 (기본값), round - 둥근 각도, bevel - 평평한 각도.

구문

컨텍스트.lineJoin = 'miter' 또는 'round' 또는 'bevel';

예시

lineJoin 속성을 meter 값으로 설정해 봅시다:

<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.lineJoin = 'meter';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

예시

lineJoin 속성을 round 값으로 설정해 봅시다:

<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.lineJoin = 'round';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

예시

lineJoin 속성을 bevel 값으로 설정해 봅시다:

<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.lineJoin = 'bevel';
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

함께 보기

날카로운 각도의 길이를 제한하는 속성 miterLimit
선 끝의 모양을 설정하는 속성 lineCap