[セミナー] Frontrendというセミナーに参加してきました（HTML5 Canvas編）

こんにちは、HTML5大好き@yoheiMuneです。
先週末に、Frontrend vol.2 というセミナーに雑用＆参加してきました。
そこで伺ったお話のうち気になったところをブログに書きたいと思います(*ﾟ▽ﾟ)ﾉ


http://atnd.org/events/31075

HTML5 Canvasのお話

いくつか講演があったのですが、本日は「松井 健（iPhoneアプリデベロッパー）さん」の 「Canvas Animationとクリエイティブ」から、気になったところを書きたいと思います。
（資料の公開リンクは見つけられませんでした）

CSSを多用すると、Androidで動作が重くなる。ここでCanavsの強みを発揮できる。

これは初ミミでした。経験ある人から受けた貴重な情報です。

window.requestAnimationFrameを使うと、タブなどで隠れている時には、アニメーションが停止する。
window.timeoutなどとは違う。

こんなイベントがあるのを知りませんでした。HTML5ゲームを作る時には、requestAnimationFrameを 使ってみたい。

Canvasでは合成もできる。
compositeOperation, compositeType??
 source-over, lighter, darker, などがある。

Canvasの合成について説明しているサイトやブログは少ない気がします。
これを使いこなせると、簡単な画像イフェクトはブラウザ上のみで出来そう(*ﾟ▽ﾟ)ﾉ
もちろん、Canvasのビット操作を使えば、もっと複雑な画像イフェクトが出来ますが、 これは数学知識が必要なので難しい。。

■サンプル
・sketch out
・sigma.js

サンプルサイトを紹介されていました。ゆっくりと見てみたい。

■CSS3アニメーションの制約
・アニメーション途中での処理が難しい。
・アニメーションCSSを多用すると、スマホなどでは動かないくらい重たいことも。

CSS3のAnimationやTransitionは、覚えれば簡単に出来ますが、上記のような問題があるんですね。
これも経験を伺う事のできた貴重な情報でした☆

■その他
・create JSというページが面白いらしい。
・iOS5からCanvasはGPUを用いた描画が出来る。iOS4より５倍くらい早い。

こーゆう情報って、自分の知見を広げられるから嬉しい。
この情報をもう少し深堀して、１次情報を発見したいと思います。

■Canvasの性能向上のために（やってみたいところ）
フレームバッファリング
スプライト最適化？
クリア処理の最適化

性能向上は、スゴく気になります。
今まで作ったHTML5 Canvasアプリも、性能に悩まされる事が多々（特に、スマホで）。
ここは、今後注力していきたい。

最後に

セミナーに行くと、新しい情報や経験から来る貴重な情報を頂けるので、本当にありがたいデス。
それを自分のものにできるよう、もっと深堀して、良き情報は積極的にブログに公開したいと思います。

最後までお読み頂きましてありがとうございました！