2011-01-31 14 views
8

私はhtml5が新しく、キャンバスで遊んでいます。キャンバスが本当に必要/有用になるのはどうかと思います。いつ使用されるのか?なぜhtml5でアニメーションにキャンバスを使用するのですか?

移動タグのように単純なアニメーションを行う必要がある場合は、本当にキャンバスが必要か、それともjquery/jsを使用する方が簡単かどうかです。

あなたは、2Dグラフィックアプリケーション、アニメーション、(それらを回転させるような)画像の単純な変換、GUIなどのいくつかの例を作成することができますキャンバスの助けを借りて

答えて

4

:GUIについて

  1. Asteroids game
  2. jigsaw puzzle
  3. を、残念ながら私はサイトを読み込むことができません。理由はわかりません... iWidgets.comと呼ばれていましたが、唯一見つけたのはscreenshotです。そこに青色のパイプラインが表示され、要素をバインドしています。それはキャンバスの助けを借りて行われました。要素を動かしながら、パイプラインも再描画されました。アクティブな要素を変更すると、すべての接続の色が黄色に変わります(依存関係が表示されます)。ニースのプロジェクト、私はそれだけでしばらくの間、アクセスできないことを願う...それを使用する方法について

良い記事は「An insight into the HTML5 Canvas Element」からhere

です:

canvas要素であります興味深いと のために焦点を当てる価値があるため、 初めての のグラフィックスを のフラッシュ またはJavaのような外部のプラグインに使用せずにブラウザ内で直接描画します。キャンバスの美しさは、 です。それは、 JavaScriptコードで完全に制御されています。つまり、 という強力な機能を備えています。 は既に提供しています。他の新しい要素の上にキャンバス を試して選択する

は単に それ本質的に はそれで遊ぶために潜在的に興味深いと 豊富なプラットフォームになり グラフィックスプラットフォーム、などの機能だとダウンしていました。フレキシブルな キャンバス要素を押し入れると と決定しました。 興味深い結果を アプリケーションで使用できます。

キャンバスを選択するためのもう一つの決め手は、アニメーション 機能と、それ は、潜在的なフラッシュの交換であることの可能性を試験することでした。 今のFlashは明らかに キャンバスをエミュレートすることができませんでした特長を持っている、しかし それは通常 はフラッシュのために達することによって行われるだろうキャンバスで を達成できたかを正確に見るためにエキサイティングなコンセプトもかかわらず です。

はPSより多くの有用な情報に

を取得するためにその記事を読んで。あなたのアニメーションが(あなたのページの部分のような)動いているタグに関するものであれば、キャンバスは適合しません。キャンバスはグラフィックレンダリング用です。その場合、jqueryやその他のJSライブラリを使用します。

1

キャンバスを使用すると、グラフィックスのピクセルレベルにアクセスできます。チェッカーボードの移行をしたい場合は、キャンバス内のスクリプトを使ってそれを行うことはできますが、jqueryでは実行することはできません。何ができるかのいくつかの例については

(すでに行われて)http://www.netzgesta.de/transm/

2

を参照してくださいここではCSS3トランジション/アニメーションやキャンバスを使用したときに決定するためのベストプラクティスです。 jQueryを使用している場合は、カバーの下に可能な限りCSS3のトランジションやアニメーションを使用することに注意してください。

CSS3翻訳/アニメーションは - あなたがこのような位置やサイズなどのDOM要素のスタイル、

キャンバスアニメーションをアニメーション化している場合は、これらを使用する - あなたは、より複雑な何かをアニメーション化している場合、あなたが作成しているかのように、キャンバスのアニメーションを使用しますオンラインゲーム、または物理シミュレータを構築する。 3-Dモデルをアニメートする場合は、キャンバスを使用してWebGLを活用できるようにしてください。

関連する問題