HTML canvas miterLimitプロパティ

Canvas 对象参考手册Canvas オブジェクト

インスタンス

最大マイター長 5 で線を描画します：

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari は miterLimit プロパティをサポートしています。

注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

定義と用法

miterLimit プロパティは最大マイター長を設定または返します。

マイター長とは、2本の線が交わる箇所の内角と外角の間の距離のことです。

Miter Limit figure 1

ヒント：lineJoin プロパティが "miter" の場合にのみ、miterLimit は有効です。

角の角度が小さいほど、マイター長は大きくなります。

マイター長が長くなりすぎるのを防ぐために、miterLimit プロパティを使用できます。

マイター長が miterLimit の値を超えると、角は lineJoin の "bevel" タイプで表示されます（Fig 3）：

Miter Limit figure 2
デフォルト値： 10
JavaScript 構文： context.miterLimit=number;

プロパティ値

值 説明
number 正の数。最大マイター長を指定します。マイター長が miterLimit の値を超えると、角は lineJoin の "bevel" タイプで表示されます。

Canvas 对象参考手册Canvas オブジェクト

その他の拡張