線の接続点のスタイルを変える(lineJoin) [html5 の Canvas を使ってみる：第十二回]

線の接続点のスタイルを変えてみる。こちらも線が細いと判りにくいので、lineWidth で太さを 20 にする。

★html 側

<canvas id="lineJoin"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: lineJoin で 2 次元描画を行うことの定義
  var c = document.getElementById("lineJoin").getContext('2d');

// 線幅 20 の三角形を lineTo(); と closePath(); と lineWidth で描画
  c.beginPath();
  c.moveTo(20, 30);
  c.lineTo(100, 70);
  c.lineTo(20, 110);
  c.closePath();
  c.lineWidth = 20;
// 線の接続点のスタイルを bevel に定義
  c.lineJoin = "bevel";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。黒の太線と同じ座標を通る赤線と、左の座標を通る縦の赤線を補助線として引いてみる。


では、これの構造を見てみる。今回は右の部分を拡大したような図形でやってみる。bevel は左上からの線と左下からの線が接続点で交差したときにできた隙間（下図の赤い部分）を補完した図形になる。


次に round を入れてみる。これにも補助線を引いてみる。

  c.lineJoin = "round";

これの構造も見てみる。round は左上からの線と左下からの線が交差した接続点を中心にし、線の太さを直径にした円形を補完した図形になっている。


最後に miter を入れる。これにも同様に補助線を引いてみる。

  c.lineJoin = "miter";

miter の構造は、左上からの線と左下からの線が接続点を無視して伸びているとし、その重なりあっている菱形を補完した図形になっている。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5