HTML5画布-制作一个动画背景与下降的黄金薄片

HTML5 Canvas - Making an animated background with falling gold flakes

本文关键字：背景黄金动画一个画布 HTML5 更新时间：2023-09-26

我正在制作一个需要动画背景的网站。我试着模仿飘落的金片。最初我们尝试使用gif动画，但它太笨重，太慢了。

这是我第一次使用Canvas，我绝对希望有更有经验的人给我一些建议。

我找到一些代码作为起点，并根据我的需要重新利用它。这是我目前在哪里:http://codepen.io/slickdev/pen/LqKai

待办事项:我想减慢下落粒子的速度，并改变它们的形状，从一个完美的圆圈看起来更像下落的金片。如果我能让它看起来更真实，那将是理想的。我还需要关注表现。有什么方法可以优化它以提高运行效率吗?

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

非常感谢您的帮助!

我不知道你现在是否已经有机会完成这个，但是这里是....

要改变下落粒子的速度，你需要编辑第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画布分形应用程序的源代码，在这里。

我希望这对你有帮助。