속성 miterLimit
속성 miterLimit는
속성 lineJoin가
miter 값으로 설정되었을 때
두 선의 연결부 날카로운 정도를 조절합니다.
어떻게 조절하냐면:
연결부(끝)의 길이가 miterLimit에
설정된 숫자보다 크게 되면, 선의 연결부는
마치 lineJoin이 bevel 값으로
설정된 것처럼 동작합니다.
기본적으로 miterLimit의 값은 10입니다.
1 미만으로 값을 설정할 수 없습니다.
구문
컨텍스트.lineJoin = 'miter' 또는 'round' 또는 'bevel';
예시
지금 lineJoin 속성은
miter 값으로 설정되어 있지만,
아직 제한이 설정되지 않았으므로,
연결부는 날카롭습니다:
<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.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
예시
이제 miterLimit를 사용하여
제한을 설정해 보겠습니다:
<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.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();
:
함께 보기
-
선의 끝 모양을 지정하는 속성,
lineCap
