ブラウザ上に図形が描けるcanvasタグ

最近のWebアプリでは、グラフを描くツールやお絵かき掲示板など、ブラウザ上で簡単な図形を描くものが増えています。
これらのアプリの多くは、
　・gifやpngの画像をサーバー側で生成するタイプ
　・FlashやJavaでクライアント側で描画するタイプ

の２種類に大別できます。しかし、最近になって新たなる手法が広まりつつあります。
それが、<canvas>タグ、SVGファイルです。ちょい昔にVMLなんてのもありましたが消えつつあります。

<canvas>タグとは
<canvas>タグは、ブラウザ上に直線や多角形や画像を描画するキャンバスを生成するタグです。
詳しい使い方は、canvas の描画メソッド - WebOS Goodiesとかのページにあります。

これのメリットは、JavaScriptから直接ブラウザに図形を描けることです。
現状では速度面や描画の機能などでは、Flashに到底及びませんが、手軽に使えるのでCGIゲームのインターフェースには便利です。

なお、IEはこのタグに対応していません。しかし、Googleが開発したExplorerCanvasというJavaScriptをインクルードするだけでIEでも同等の機能が使えます。

ちなみに、Vipper Cityでも<canvas>を使ってマップを描画しています。
で、マップ上の建物をクリックすると情報を表示する、という機能をつけたのですが、IEで互換性の問題が起こりました。

通常、event.offsetXでマウスの座標を取得するのですが(詳しいやりかたは忘れた)、この方法では正しく取得できません。IEでは、canvasに画像を描画した場合、その画像の左上を基準とした座標が返ってきます。どうやら、canvasに貼った画像が要素として認識されるみたい。
そこで、event.xで親要素の座標を取得すると……、うまくいったぞ！

SVGファイル
SVG(Scalable Vector Graphics)は、ベクターグラフィックの規格です。ベクターグラフィックは、直線や曲線をベースにした画像のことで、ファイルサイズが小さい、拡大しても汚くならない、というメリットがあります。AdobeのIllustratorはベクターグラフィックを扱うソフトの代表格です。
でもIllustratorは素人が購入できるような価格ではありませんねｗ。

そこで、オープンソースで開発されているInkscapeというソフトがあります。俺はこれを使ってます。

しかし、現時点ではサーバーでSVGを生成して表示するサービスというのは、ほとんど見られません。多分IEで表示できないからでしょう…。IEでもSVGを表示するプラグインがあるのですがインストールが面倒ですね