矩形を描く(rect) [html5 の Canvas を使ってみる：第六回]

矩形を描くのはとても簡単。長方形や正方形なら、lineTo(); でいちいち指定するよりも速いし間違えにくい。この辺りも SVG とよく似ている。

★html 側

<canvas id="rect"></canvas>

★Javascript 側

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

// 描画をすることを宣言
  c.beginPath();
// 座標 x:10、y:10 を基点にして、
// 幅 100、高さ 50 の矩形を描く
  c.rect(10, 10, 100, 50);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


上記の場合、stroke(); を記述しなければ、白くて枠のない矩形が描画される。fillStyle で色を塗っておけば、その色だけの矩形を描くことができる。

また、rect(); はパスを描くわけではないので、beginPath(); は宣言しなくても描画できるが、宣言しないと他で使おうとしている strokeStyle などに影響を受けるようなので、記述しておいた方がいいと思う。

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

W3C；
4.8.11 The canvas element — HTML 5