HTML5 Canvas - 用落下的金片制作动画背景答案

【问题标题】：HTML5 Canvas - Making an animated background with falling gold flakesHTML5 Canvas - 用落下的金片制作动画背景
【发布时间】：2013-03-20 22:52:58
【问题描述】：

我正在开发一个需要动画背景的网站。我试图模仿落下的金片。最初我们尝试使用动画 gif，但它太重且太慢了。

这是我第一次使用 Canvas，我肯定希望有更多经验的人给我一些意见。

我找到了一些代码作为起点，并根据我的需要重新调整了它的用途。这是我目前所在的位置：http://codepen.io/slickdev/pen/LqKai

待办事项：我想减慢下落粒子的速度，并将它们的形状从完美的圆形变为看起来更像落下的金片。如果我能让它看起来更逼真，那将是理想的。我还需要关注性能。有什么方法可以优化它以更高效地运行？

在可访问性/跨浏览器兼容性方面，这种方法有什么缺点吗？我做了一些研究，似乎得到了广泛的支持。

非常感谢您的帮助！

【问题讨论】：

听起来你的第一个工作是用 drawFlake 替换 drawCircle 方法并使用多边形而不是完整的弧。即falcon80.com/HTMLCanvas/BasicShapes/Triangle.html 和blog.riacode.in/2011/03/03/… 应该可以帮助您入门。

标签： javascript html animation canvas particles

【解决方案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 canvas fractals。

Pentaflake 分形是一个很好的例子，如果您正在寻找简单的东西，那么应该研究什么。如果您真的想大开眼界，那么我建议您查看这个 HTML 画布分形应用程序的源代码，here。

我希望这会有所帮助:)

【讨论】：