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应用程序的源代码。

我希望这有帮助 ：）