HTML5 Tech Talk -- Canvas 編

告知通り HTML5 の Tech Talk に参加した。セッションは二つ。

• オフライン・ウェブ・アプリケーションを作るための API の説明
• HTML5 で絵を描くための Canvas の説明

本エントリーは後者の Canvas セッションのメモ書き。

Canvas VS. SVG

ウェブ・ブラウザーで絵を描くといったら、SVG が有名。Canvas は何が違うのか? 相違点を列挙して下さった。

Canvas

• JavaScript を使って描画
• 描いた図を個別に認識できない (JavaScript で後からいじれない: 位置をずらすとかね)
• 描画が高速
• ピクセル操作が可能

SVG

• XML 形式のマークアップで図を表現
• 描いた図を個別に認識できる (JavaScript で後からいじれる)
• 要素が増えると重くなる
• ピクセル操作は不可能

結果、Canvas はマンデルグローブ集合のような複雑な図を描くのが得意で、ウィジェットのやうにユーザーが使う UI 部品を作るのが苦手となる。Canvas と SVG は適材適所で使うと良いらしい。

実践編

この後、Canvas で絵を描くための命令を個々に紹介して下さった。その例を見て、絵を描いてみるよ。

「Canvas Test」ってリンクをクリックすると、四角が表示される。

Canvas Test

<script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('canvas-test');
    if (canvas.getContext) {
      var ctx = canvas.getContext('2d');

      // Path
      ctx.moveTo(50,50);
      ctx.lineTo(50,75);
      ctx.lineTo(75,75);
      ctx.lineTo(75,50);
      ctx.closePath();
      ctx.stroke();
    }
  }
</script>
<canvas id="canvas-test" width="100" height="100"></canvas>
<a href="javascript:draw();">Canvas Test</a>

Canvas 要素で描画領域を作って、その要素から getContext が返すインスタンスに対して「JavaScript で描画を行なう」というのが基本。

で、色々と関数を教えてもらった。

beginPath, lineTo, closePath, arc, arcto, bezierCurveTo, strokeStyle, fillStyle, stroke, fill

何か見たことのある命令ばっかり。

PostScript!!!

違うのは、PostScript の四則演算・for 文・if 文を JavaScript で書けること。こりゃ便利。昔の PostScript のコードも移植できるかもしれない。Canvas 楽しいねぇ。誰か Canvas の BlueBook を出さないかしらん。