忍者ブログ
目標: 月1回以上更新すること
> ホーム <
1 69 68 67 66 65 64 63
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

の2種類に大別できます。しかし、最近になって新たなる手法が広まりつつあります。
それが、<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は素人が購入できるような価格ではありませんねw。

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

しかし、現時点ではサーバーでSVGを生成して表示するサービスというのは、ほとんど見られません。多分IEで表示できないからでしょう…。IEでもSVGを表示するプラグインがあるのですがインストールが面倒ですね
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
ブログ内検索
カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
~*~*~*~
カウンター
最新コメント
[09/25 紗弥加]
[09/09 しょうこ]
[08/11 かおる]
[07/30 みなみ]
[07/22 純]
最新トラックバック
アクセス解析仕掛けてます
忍者ブログ [PR]