線の太さを変える(lineWidth) [html5 の Canvas を使ってみる：第十回]

今まで図形を色々と書いてきたが、線の太さも変えられるようだ。

★html 側

<canvas id="lineWidth"></canvas>

★Javascript 側

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

// 三角形を lineTo(); と closePath(); で描画
  c.beginPath();
  c.moveTo(10, 10);
  c.lineTo(110, 20);
  c.lineTo(30, 30);
  c.closePath();
// 線の太さを 5 に定義
  c.lineWidth = 5;
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


この lineWidth は、描画ポイントとなる座標を結んだ線を中心線として、その両側が太っていくことによって、線の太さとしている。以下は太さを 50 とした線に、中心線を赤で重ねたもの。


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

W3C；
4.8.11 The canvas element — HTML 5