HTML5 Canvas-用掉落的金片制作動畫背景

Question

我正在一個需要動畫背景的網站上工作。 我試圖模仿掉落的金片。 最初，我們嘗試使用動畫gif，但是它太笨重了。

這是我第一次與Canvas合作，我當然希望有更多經驗的人能給我一些建議。

我找到了一些代碼作為起點，並根據自己的需要對其進行了重新設計。 這是我當前所在的位置： http : //codepen.io/slickdev/pen/LqKai

待辦事項 ：我想減慢下落的粒子的速度，並將其形狀從完美的圓形更改為看起來更像下落的金片。 如果我可以使它看起來更逼真，那將是理想的。 我還需要關注性能。 有什么方法可以優化它以使其更有效地運行？

就可訪問性/跨瀏覽器兼容性而言，此方法是否有任何缺點？ 我已經進行了一些研究，並且似乎得到了廣泛的支持。

您的幫助將不勝感激！

Answer 1

我不知道您之前是否已經有機會完成此操作，但是這里...

要更改下落粒子的速度，您需要在您的那支分支筆的第57和58行上編輯@vx和@vy ，類似於：

@vx = range(0,1)+8*xpos-5
@vy = 0.2*@r

我發現更改DOP（和Y值進行補償）也可以提供一些“可信”的東西：

@dop = 0.001*range(1,5)
@y = range(-100,h-@r2)

關於繪制更多“逼真的”雪花，我個人更喜歡看到更接近“圓形”的形狀，因為實際的薄片本身在現實生活中很難看到。 但是，如果您熱衷於最初的想法，我可以為您指出HTML5畫布的分形 。

Pentaflake分形就是一個很好的例子，它可以用來尋找簡單的東西。 如果您真的想引起人們的注意，那么我建議您在此處研究此HTML canvas fractal應用程序的源代碼。

我希望這有幫助 ：）