告知通り 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 を出さないかしらん。
No comments:
Post a Comment