2008年07月31日

くぱぁ(i)に好きな画像を挿入できるようになりました

iPhoneユーザーのみなさんこんにちは!直感的にくぱぁできるWebサービス『くぱぁ(i)』に新しいバージョンが登場しました!


新しいくぱぁ(i)は3種類の画像からこんなくぱぁを作れます。

photo(2)

DEMO(foriPhone/touch):http://hayashi311.googlepages.com/cupha2.html

ダウンロード:http://hayashi311.googlepages.com/cupha.zip

対話的でリッチで革新的な次世代ユーザインターフェースですね!iPhoneがすぐ熱くなるのもなんか納得しちゃいますね!


ZIPファイルの中にやり方.txtが入っているので好きな画像を入れてみて下さい!


では、javascriptとHTML5の話をしましょう。

canvas要素に画像を挿入する



 canvas要素には画像を挿入することができます。これには画像をオブジェクトとして扱わなければいけないのですが、一番簡単なのは同じページ内に画像を配置した画像をdocument.getElementById で取得する方法でしょう。幸いcanvas要素を使うようなiPhone向けサイトはスクロールをロックしていると思うので、見えないところに配置しておけばいいと思います。

 他の方法に関してはmozillaのチュートリアルが詳しいです。

canvas要素チュートリアル


描画の基本は前回と同じです。

くぱぁのcanvas要素の説明


前回はパスを描きましたが、今回は代わりにdrawImage(image, x, y, width, height);を使います。

 引数はそれぞれ(上で取得したImage オブジェクト,画像左上のX座標,雄ねじくY座標,画像の幅,同じく高さ)です。最初の引数はimageのidではなくてオブジェクトだということだけ気を付ければ簡単だと思います。width,heightを変更することで伸縮を行います。

詳しくはZIPファイルの中のcupha.jsをご覧下さい。


canvas要素に画像を挿入しながらアニメーションを行うテクニック




■基本
基本は画像を極力減らすことです。canvas要素は透過PNGの様に背景が透けるので背景に置けるものはすべて背景にしましょう。画像を極限まで減らした上で次を参考にしてください。


 canvas要素に画像を挿入する手法は以上ですが、このままアニメーションを行うとiPhoneでは処理できずにカクカクになってしまい、最悪safariが落ちてしまいます。


 どうやら前回の描画が終わらないうちに次の描画を行うと重くなってしまうみたいです。2つのアイディアで解決できましたが、他の方法があれば指摘してもらえるとうれしいです!

・描画を切り分けてsetIntervalで行う
・前の描画が終わった時点で次の描画を行う

 一つ目の方法はパラパラマンガみたいなイメージです。変数(タッチしている座標とか)が変わった時点で描画するのではなく、だいたい50ms〜100msくらいの間隔で描画を行います。タッチした時点でパラパラを開始して、離れた時点でパラパラ終了。
 試してみましたが、割と面倒な上に時間設定をミスするとカクカクが再発してしまいました。この方法は時計のアニメーションなんかには向いていますが、対話的なアプリケーションには向いていなさそうです。



 二つ目の方法はdraw()の中身を0秒をセットしたsetTimeoutで包むやり方です。こうすることでドキュメントが安定するまでコードの実行を遅らせることができます。(O'REILLY javascript 5版 P282参照)

setTimeout(function(){

-中身-

},0);


 これはドキュメントの追加なんかを行う時によく使われるテクニックですが、canvas要素の更新も安定するまで待ってくれるみたいです。これで、canvas要素が描画されてからすぐに次の描画を行うことができます。割とうまくいったので今回はこっちを採用しています。


 詳しくはZIPファイルをダウンロードしてご確認ください。ついでにいろんなものをくぱぁしてみるといいと思います!


**

hayashi311 at 05:05コメント(1)トラックバック(0) 

トラックバックURL

コメント一覧

1. Posted by 桂言葉   2009年08月09日 22:41
さっそく、くぱぁさせてみました!
もっといろんなものがくぱぁできるようになるといいですね!

コメントする

名前
URL
 
  絵文字
 
 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ