プロパティ miterLimit

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

Результат:

関連項目