Canvasを使って絵を描いてみる。

FirefoxやSafariで使えるというCanvas要素を使って、絵を描きました。
これを使うと円やら斜め線やらベジェ曲線やらをHTML上で描くことができます。ただし、対応するブラウザが限られていて、とりあえずIEでは動かないらしい。

基本的な使い方

canvasの基本的な使い方は次の通りです。

HTMLにcanvas要素を配置する。
JavaScriptでcanvas要素からコンテキストを取り出す。
コンテキストのAPIを呼び出して線を引く。
- コンテキストはJava-AWTでのGraphics2Dみたいなモノです。APIも似た感じで、円を描いたり線を引いたりするAPIを持ちます。

サンプル

日の丸です。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

  <!-- キャンバス要素を作る。 -->
  <canvas id="canvas" width="300" height="200" style="border:1px solid #999999;background-color:#FFFFFF;">
  </canvas>

  <script type="text/javascript">

    // キャンバス要素からコンテキストを取得。
    var canvas = document.getElementById('canvas'); // キャンバス要素
    var ctx = canvas.getContext('2d'); // 引数を'2d'として、2次元描画用のコンテキストを得る。

    // ●を描く。
    ctx.fillStyle = "#FF0000";                // 塗りの色を赤に設定。
    ctx.beginPath();                          // パスの描画を開始
    ctx.arc( 150, 100, 50, 0, Math.PI*2, 1 ); // ○を描く
    ctx.fill();                               // 書いたパスを塗りつぶす

  </script>
</body>
</html>

実行結果です。注:IEでは動作しません。

参考:

mozilla developer center - Canvas チュートリアル。まずはこれを。
canvasタグリファレンス