HTMLリファレンスマニュアル

HTMLタグ一覧

HTML canvas lineJoin属性

lineJoinはCanvas 2D APIを使用して設定します2長さが0でない連続した部分（線の部分、円弧、曲線）がどのように結び合うかを決定する属性（長さが0の変形部分、指定された端と制御点が同じ場所にある場合、無視されます）。

オンラインサンプル

两条の線が交差したとき、角を丸くします：

サンプル

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　lineJoin　属性の使用(基本チュートリアルウェブ　oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTML5　canvas　タグ。</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
</script>
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は lineJoin 属性をサポートしています。

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

定義と使用方法

2本の線が交差する場合、lineJoin属性が設定または返され、生成される角のタイプが設定されます。

注意："miter" 値はmiterLimit 属性の影響。

デフォルト値：	miter
JavaScript 文法：	context.lineJoin="bevel\|round\|miter";

属性値

値	説明
bevel	斜角を生成。
round	丸角を生成。
miter	デフォルト。尖角を生成。

HTML canvas 参考マニュアル

HTML: <template> タグ