- 29
The <canvas> element has been revelation for visual experts among our ranks. Canvas は、Flash を使用しない追加ボーナスとともに、驚くべき効率的なアニメーションの手段を提供します。 ここでは、顎が外れるような 9 つの信じられないような canvas のデモを紹介します！
Zen Photon Garden
Zen Photon Garden デモは、心を打つものの典型的な例と言えます。 この壮大なキャンバスのデモでは、反応する光の流れでキャンバスに描画することができ、ユーザーは新しいラインの最終製品を見ることができます。 さらに良いことに、このデモでは出力の保存と読み込みが可能です。
Tear-able Cloth
Tear-able Cloth デモは過去数か月間にわたってウェブに火をつけ、それには正当な理由がありました。 このデモは最もスムーズで、達成するタスクと関与するコードの少なさを考慮すると、息を呑むようなものです。 アニメーションや、涙をエレガントにアニメーションさせるために強く引っ張ることを考慮する必要があるなど、単純な引っ張りや物理以上のものがこのデモをより素晴らしいものにしています。 canvas の能力を完璧に表現しています。
Check out this Pen!
Particles
Check out this Pen!
Motion Graphic Typeface
この効果がどのように行われたかを説明できればいいのですが、それはできません。 それぞれの文字が異なる画像データで構成されているのはわかるのですが、それだけです。 ただ、このアニメーションは、文字がアニメーションで配置され、マウスの位置によって文字の見え方が変わるので、本当に驚かされます。 Shocking.
Check out this Pen!
Motion Graphic Typeface II
最初のデモが十分印象的でなかったかのように、2 つ目の MGT デモはピューリッツアー賞に値するものです。 これほど巧妙であるなら、私の2番目、3番目、8番目の子供をあきらめるだろう。 テキストがアニメーションするだけでなく、アニメーションの一部に信じられないような色のブラーが使われているのです。
Check out this Pen!
Gestures + Reveal.JS
さて、このデモは私の心を揺さぶっただけでなく、私の CPU をも揺さぶりました。 この演習では、デバイスのカメラとマイクを使用して、ジェスチャに基づいてデータのキューブを移動させます。 MacBook Pro をお持ちなら、これを試す前に死ぬことはないでしょう。 デモを起動して腕を振り回してみてください。デモのコンテンツが動き回るのを見て、霊を信じるようになるでしょう。
Free Rider 2
少なくとも 1 つのゲームを含めずに canvas の素晴らしさをカバーすることはできません。 Firefox OS が間もなく実証するように、canvas は間違いなく HTML5 ゲームの未来です。 この素晴らしくもシンプルな自転車ゲームは、canvas がプライムタイムの準備ができていることを示しています！
30,000 Particles
The 30k Particles デモには、円形（半径）、爆発して戻るアニメーションの粒子、ユーザーが爆発を制御できるマウス リスナーといった本当に素晴らしいものが組み込まれています。 インタラクティブ性とロジックの優れた例です。
Check out this Pen!
HTML5 Video Destruction
私が見た最初の本当に目を引く canvas のデモの 1 つ、爆発する canvas ビデオに敬意を表さなければなりません。 動画をクリックすると破片が爆発しますが、動画は爆発中もそのセグメント/位置を再生し続け、元の位置に戻ります。 私たち全員にとって刺激的なデモです。
