속성 miterLimit

속성 miterLimit는 속성 lineJoin가 miter 값으로 설정되었을 때 두 선의 연결부 날카로운 정도를 조절합니다. 어떻게 조절하냐면: 연결부(끝)의 길이가 miterLimit에 설정된 숫자보다 크게 되면, 선의 연결부는 마치 lineJoin이 bevel 값으로 설정된 것처럼 동작합니다.

기본적으로 miterLimit의 값은 10입니다. 1 미만으로 값을 설정할 수 없습니다.

구문

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

예시

지금 lineJoin 속성은 miter 값으로 설정되어 있지만, 아직 제한이 설정되지 않았으므로, 연결부는 날카롭습니다:

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

Результат:

예시

이제 miterLimit를 사용하여 제한을 설정해 보겠습니다:

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

Результат:

함께 보기