【问题标题】:Html 5 Canvas Particle effectHtml 5 Canvas 粒子效果
【发布时间】:2014-07-23 16:05:39
【问题描述】:

大家好,我需要指导来重现我在网站上看到的奇妙的完整效果 Fifty-five.com 。预加载完成后,您将在画布上看到公司的徽标。

我已经成功地在画布中创建了粒子,但是在将鼠标悬停在画布上时,连接粒子以创建网格状结构的数学原理是什么?

【问题讨论】:

  • 仅仅通过观察几分钟的行为很难评估他们使用的规则。但是,起点将是一些基本的三角函数(毕达哥拉斯),以评估哪些粒子在当前光标点的定义距离内。之后,它只是在范围内这些粒子的当前点之间绘制线的情况。
  • 我认为部分影响是随着粒子的衰减,一些连接是孤立的。
  • 另外.. 代码都在那里,你可以看到未缩小的。
  • @net.uk.sweet 我读了代码,但它超出了我的想象,所以需要帮助来让我理解逻辑。我试图映射功能点,但在中途丢失了!!

标签: html animation jquery-animate core-animation effects


【解决方案1】:

我找到了这个http://cssdeck.com/labs/html5-canvas-particles-web-matrix 也许你可以添加一些鼠标交互。请在此处显示最终结果。

注意:我不是这方面的专家。

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效。
【解决方案2】:

看看particles.js:

http://vincentgarreau.com/particles.js/

https://github.com/VincentGarreau/particles.js/

他们的主页与您提到的 55.com 网站上使用的效果相似。

您可以启用“line_linked”来链接粒子。

我希望这会有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-07
    • 2014-04-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多