線の両端のスタイルを変える(lineCap) [html5 の Canvas を使ってみる：第十一回]

今度は線の両端のスタイルを変えてみる。線が細いと判りにくいので、lineWidth で太さを 30 にする。

ただ、これはあくまでの線の端であり、三角形なり四角形なりの形の全ての端にスタイルを効かせるときは、lineJoin を使う。

★html 側

<canvas id="lineCap"></canvas>

★Javascript 側

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

// 太さ 30 の線を lineTo(); と lineWidth で描画
  c.beginPath();
  c.moveTo(50, 50);
  c.lineTo(100, 50);
  c.lineWidth = 30;
// 線の両端のスタイルを butt に定義
  c.lineCap = "butt";
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。判りやすいように補助線も引いてみる。横の赤線は黒い線の中心を通り、縦の 2 本の赤線は両端の座標を通っている。


この butt はデフォルト値で、端を丸くするには round を使う。これも同じ扱いの補助線を引いてみる。

  c.lineCap = "round";

これの構造を知るために、薄い黄色の補助円を描いてみる。両端を円の中心点にし、半径を黒い線の太さの半分とすると、ちゃんと重なる。


もう一つの値 square を入れてみる。これも同様の補助線を引いてみる。

  c.lineCap = "square";

これも構造を知るために、薄い黄色の補助矩形を描いてみる。両端を矩形の中心点にし、一辺の長さを黒い線の太さの倍とすると、ちゃんと重なる。


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

W3C；
4.8.11 The canvas element — HTML 5