2012-05-12 6 views
0

私はここで見られるように、同様の効果を作成しようとしています:HTML5のパーティクル効果

http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/

しかし、私はこれが私のページ上で動作するように取得するように見えることができないと、私はこの効果を適用したいと思いますイメージを含むdiv内にあります。これは可能ですか、それともキャンバス上ですべてが行われなければなりませんか?

私はなど定義されていない変数としてエラーの多くを得るチュートリアルで説明した効果を再作成しようとすると

+0

これらの変数を定義することをお勧めします。そして、はい、それはキャンバスにあります。 – Marc

答えて

0

あなたは、キャンバスを使用して、またはCSSの変換と影を使って、これを再作成することができたり2つの混合物。定義されていない変数については、あなたのコードを投稿していないので私は助けることができません。

きれいなアプローチは、JavaScriptを使用してキャンバス内のすべてを行うことです。前景の草と背景山の両方をキャンバスに描画できます。しかし、部分的に<div>を使用する場合は、CSS position:fixedまたはposition:absoluteを使用してキャンバスの上にdivを重ねることができます。また、CSS z-indexを使用してその順序を設定することもできます。

私は、画像描画のためにスクロールダウンし、次のリンクをお勧めします。 http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

あなたが提供してきたチュートリアルは非常によく、すべてを説明しているように私は、私がどのように役立つか他のか分かりません。しかし、それ以上の質問がある場合は、自由に意見を述べるか、質問を更新してください。

0

あなたは簡単に効果を達成するために、プロトン粒子エンジンを使用することができます、そのAPIは非常に簡単です。 http://a-jie.github.io/Proton/

関連する問題