ここに見られるような同様の効果を作成しようとしています:
http://timothhypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
ただし、これを自分のページで機能させることができないようで、画像を含む div にこの効果を適用したいと考えています。これは可能ですか、それともキャンバス上ですべてを行う必要がありますか?
チュートリアルで説明されている効果を再現しようとすると、変数が定義されていないなどの多くのエラーが発生します。
Canvas を使用するか、CSS 変換とシャドウを使用するか、またはこの 2 つの組み合わせを使用して、これを再作成できます。未定義の変数については、コードを投稿していないため、お手伝いできません。
クリーンなアプローチは、JavaScript を使用してキャンバス内ですべてを行うことです。前景の草と背景の山の両方をキャンバスに描画できます。ただし、部分的に a を使用する場合は、CSSまたは<div>を使用してキャンバスの上に div をオーバーレイし、CSS を使用して順序を設定することもできます。position:fixedposition:absolutez-index
次のリンクをお勧めします。下にスクロールして画像を描画します: http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
あなたが提供したチュートリアルがすべてを非常によく説明しているので、他にどのように助けることができるかわかりません. さらに質問がある場合は、お気軽にコメントするか、質問を更新してください。
陽子粒子エンジンを使用すると、必要な効果を簡単に実現できます。その API は非常にシンプルです。http://a-jie.github.io/Proton/