「便利になるとストレスが上昇する」という不思議なジレンマ
canvas 対 SVG

ianime.js: iPhoneのCanvasにVector 描画させてみる

 英語ブログの方に昨日書いたのだが、ianime.jsにベクターでのアニメーションをサポートする機能を付け加えた。SVGのようにタグでシェイプを記述できないので、コールバック・ファンクションの形で記述する。

 Firefox/Safari/Operaがサポートし、業界標準になりつつあるCanvasに関しては誤解している人も多いようだが、ビットマップだけでなくベクター描画の機能が付いており、これを使えばFlashでしか実現できなかったことがブラウザー上のJavascriptで実現できる(その意味では、SVGともオーバーラップする部分がある点が少し問題だが、それに関しては別途書こうと思う)。

 現時点で、FlashもSVGもサポートしていないiPhone/iPod touch上のブラウザーでベクター・グラフィックスを使おうと思ったら、これが唯一の選択肢。

 下に貼付けたのはこれを使って「蝶」を飛ばせるデモ(Firefox/Safariで動作確認済み。Operaは未確認。IEはサポート外)。いずれかのアイコンをクリックすると、そこから蝶が飛び立つ。何匹でも同時に飛ばすことができるので、これを使ってiPhoneのベクター描画能力を測定。10匹ぐらいは何の問題もない。iPhone/iPod touchで試したい人は、下のURLで。

http://satoshi.blogs.com/ianime/test24.html

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)