HTML5粒子效果

Question

我想創建一個類似的效果如下所示：

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

不過，我似乎無法得到這個我的網頁上工作，我想申請這個效果在包含圖像的div中。這是可能的還是一切都必須發生在畫布上？

當我試圖重新在本教程中，我有很多錯誤，比如沒有被定義的變量等描述的效果

Answer 1

你可以使用Canvas，或使用CSS轉換和陰影，重新創建此或兩者的混合物。至於未定義的變量，我無法幫助你，因爲你還沒有發佈你的代碼。

乾淨的方法是使用JavaScript來完成畫布中的所有操作。您可以將前景草和背景山畫到畫布上。但是，如果您想部分使用<div>，則可以使用CSS position:fixed或position:absolute覆蓋畫布頂部的div，也可以使用CSS z-index設置它們的順序。

我推薦以下鏈接，向下滾動的圖像繪製： http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

我不知道我還能怎麼幫助，爲您提供解釋一切很好的教程。但是，如果您有任何疑問，請隨時發表評論或更新您的問題。

Answer 2

你可以使用質子粒子引擎輕鬆實現你想要的效果，它的API非常簡單。 http://a-jie.github.io/Proton/