プロパティ miterLimit
プロパティ miterLimit は、
プロパティ lineJoin
が値 miter に設定されている場合の、
2本の線の接合部分の尖り具合を調整します。
どのように調整するかというと、
角の長さが 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
