前から気になっていたHTML5をいじってみることにしました。
HTML5から新しく追加された機能の一つ「canvas」タグを使って図形を描画してみます(｀・ω・´)
簡単なサンプルとして、陰陽玉を描いたサンプルを紹介など...。



HTML5で図形を…とは言ってものの、実はHTML5だけでは図形は描画できません。
HTML5とJavaScriptを使って描画を行います。

一年前くらいに「HTML5でWebが変わる！」など話題になっていましたが、
広い意味でのHTML5は
「HTML5」
「CSS3」
「JavaScript」
その他色々新技術を合わせたモノのようです。（最近知った）

今回の図形の描画もほとんどJavaScriptの書き方の紹介になります（＾ω＾）

図形を表示するcanvasタグを用意する

さっそくcanvas先生の出番です、セピア色のモチーフです。
図形を描画したい場所にcanvasタグを書き、id、サイズを指定します。

<!-- canvasタグ -->
<canvas id="sample" width="140" height="140"></canvas>

これだけです、かんたん（＾ω＾）

JavaScriptでcanvas要素のオブジェクトを取得する

JavaScriptを使ってcanvas要素のオブジェクトを取得をします。
先ほど指定した「sample」というIDからgetElementByIdメソッドでノードオブジェクトを取り出します。
それからgetContextメソッドを使ってコンテキストを取得します。
（HTML5に対応していないブラウザの場合はgetContextメソッドの返り値が空になるので、ここで処理中断をしておきます。）

（＾ω＾）「コンテキスト？なにそれ美味しいの」

という方も多いと思います。聞きなれない名前ですが、なんとなく真っ白な紙を想像してもらえたらいいと思います、
コンテキストに対して色々アレコレやると、canvasに色々アレコレ反映されます。

<!-- Canvas要素を取得 -->
var canvas = document.getElementById('sample');
<!-- 非対応ブラウザ用の処理 -->
if ( ! canvas || ! canvas.getContext ) {
  return false;
}
<!-- コンテキストを取得 -->
var context = canvas.getContext('2d');
<!-- 描画開始 -->
context.beginPath();

矩形（長方形）を描画する

矩形（長方形）を描画する時はfillRectメソッドを使用します。
引数は

• 矩形の左上のx座標
• 矩形の左上のy座標
• 横の幅
• 縦の幅

の4つです。
座標(10,10)の位置に横幅100、縦幅150の矩形を描画なら
　fillRect(10,10,100,150);
です。

---

【サンプルブログラム】
※canvas取得まで省略

  var context= canvas.getContext('2d');
  context.beginPath();
  context.fillRect(10,10,100,150);

【実行結果】

---

円・円弧を描画する

円または円弧を描画する時はarcメソッドを使用します。
引数は

• 円の中心のx座標
• 円の中心のy座標
• 円の半径
• 円を描き始める角度
• 円を書き終わる角度
• 円を描く向き

の６つあります。
座標(100,100)の位置に半径80、0度から360度まで、反時計回りの円を描く場合は
　arc(100,100,80,0,Math.PI*2,true);
です。
角度はラジアン指定、向きはbool値で指定しています。
次に、

• strokeメソッド
• fillメソッド

を使い円を描画します。

strokeメソッドは線のみ。
fillメソッドは塗りつぶしをします。

---

【サンプルブログラム】
※canvas取得まで省略

  <!-- 線のみ、円 -->
  var context= canvas.getContext('2d');
  context.beginPath();
  context.arc(100,100,80,0,Math.PI*2,true);
  context.stroke();
  <!-- 塗りつぶし -->
  var context= canvas.getContext('2d');
  context.beginPath();
  context.arc(100,100,80,0,Math.PI*2,true);
  context.fill();
  <!-- 半円 -->
  var context= canvas.getContext('2d');
  context.beginPath();
  context.arc(100,100,80,0,Math.PI,true);
  context.fill();

【実行結果】
・線のみ

・塗りつぶし

・0度から180度までの半円（線のみの場合は円弧）

---

ここからおまけ。

サンプル・円を組み合わせて陰陽玉を描画してみる

円だけで描ける図形は何があるだろうか…と考えた結果、陰陽玉（太極図みたいな奴）を描いてみました。

【サンプルプログラム】

  var canvas = document.getElementById('onmyo_ball');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var context= canvas.getContext('2d');
  context.beginPath();
  context.arc(153,153,153,0,Math.PI*2,true);
  context.fill();
  context.beginPath();
  context.fillStyle = 'rgb(255, 255, 255)';
  context.arc(153,153,150,0,Math.PI,true);
  context.fill();
  context.beginPath();
  context.fillStyle = 'rgb(0, 0, 0)';
  context.arc(78,153,75,0,Math.PI,true);
  context.fill();
  context.beginPath();
  context.fillStyle = 'rgb(255, 255, 255)';
  context.arc(78,153,10,0,Math.PI*2,true);
  context.fill();
  context.beginPath();
  context.fillStyle = 'rgb(255, 255, 255)';
  context.arc(228,153,75,0,Math.PI,false);
  context.fill();
  context.beginPath();
  context.fillStyle = 'rgb(0, 0, 0)';
  context.arc(228,153,10,0,Math.PI*2,false);
  context.fill();

【実行結果】

せっかくなのでCSS3のアニメーションを使って回してみます。
ぐるぐる。