HTML5のCanvasで物理計算をアニメーション描画

Particle
1月 28th, 2012
|

HTML5を使用してCanvas要素でどの程度のスクリプト処理が可能かを調べて見ました。
※もし何も見えない場合、お使いのブラウザがHTML5に対応していない可能性があります。セキュリティーの観点からもすぐに別のブラウザへ変えましょう!

円が動いている長方形のフィールドをクリックしてみて下さい。
クリックする度に円が増えていき、それらが互いに引力の様に引っ張り合いながらアニメーションしていきます。

う~ん…悪くないですね。
このプログラム自体はFlashのアニメーションに使われるデモを移植した物なんですが、ブラウザによってはFlashより高速に動いてくれる印象があります。
やはりプラグインで計算するよいは当然ブラウザ本体で計算した方が高速ってことですね。

しかし、クロスブラウザ等の問題が解決すれば十分に基準になりうる機能ではあるんですが、結局それには未だまだ時間が必要そうです。
そもそもHTML5対応を謳うブラウザ間ですらその対応には大きな溝がありますからね。

↓参考にしたのはFlashアニメーションの本です。

Leave a comment: