Particle.Js（现在是 tsParticle.js），一种使用画布的有趣方式！

tsParticles - TypeScript 粒子

粒子.js

距离我承诺要亲手尝试用画布实现的精彩功能，已经过去很久了。

今天，我稍微体验了一下画布概念的强大之处。我选择使用了一个非常漂亮的库：Particle.Js。

这是一个非常令人兴奋的实验。我的演示确实至关重要，但我意识到，对于那些希望充分利用设计作为一种艺术形式来沟通并营造不同氛围的项目来说，它有着巨大的潜力。

毕竟，画布的概念只不过是对可以填充我们想要的内容的白色画布的明确引用......

因此，使用 Particle.Js，您可以轻松获得工作、稳定、干净、可定制的代码。

只需使用 Vincent Garreau（Particle.Js 作者）提供的工具编辑画布，并将其发布到 Codepen 即可。在这里，您可以在项目中使用 Javascript、CSS 和 HTML 部分。

其余部分则构建在承载画布的 div 中。

您可以设置所有与项目数量、悬停和点击时的交互以及项目对这些事件的响应方式相关的设置。

粒子效果可完美自定义，甚至画布底部也可以使用简单的 CSS 或背景图片。
粒子类型可从下拉菜单中选择，下拉菜单提供默认粒子、NASA、泡泡、雪和彩虹猫等。

Particle.Js 目前有 24,899 颗星（包括我的！），282 个问题和 4,400 个分支，并已获得 MIT 许可。

1）在 HTML 文件中包含CDN 库并使用

<div id="particles-js"></div>

抓取你的 HTML 内容

2）使用https://vincentgarreau.com/particles.js/上的页面工具创建您自己的自定义粒子画布

3）使用右上角的 Codepen 按钮将其发布到 Codepen

4）在您的自定义 JavaScript 文件中复制 Codepen 结果（CSS 相同）

你可以在Codepen和GitHub上找到我的演示

这个库唯一的缺点就是它已经不再维护了😢，不过等等！我们有个很棒的解决方案😎❤️！！

tsParticle.js

tsParticle.js是一个实现与 Particle.js 非常相似的库（因此与前一个库相比没有太大的不同或复杂度，真的！！），具有新功能并且维护得很好，由@matteobruni创建并根据 MIT 许可证发布并且......它也很棒✅！

为了了解如何实现它，我们在Github上有一个漂亮的文档。

Matteo 在他的文章中写道：

[...]我将向您展示用新的 tsParticles 替换particles.js的一些理由。

1. tsParticles 与 particles.js 配置完全兼容。说真的，你只需要修改脚本源码就可以了。

2. tsParticles 具有每秒帧数 (fps) 限制器，因此它们不会让 CPU 客户端承受超过必要的负担。

3. tsParticles 有很多新功能。

4. tsParticles 开发处于活跃状态。 [...]

我们在Codepen上也找到了一些很棒的tsParticles 示例，让您了解它的潜力，您可以使用 Vue、React 甚至 Angular 来实现它。WordPress 没有插件，但您可以通过 Elementor 的 Premium Addons（在 Premium Particles Add.on 部分）使用 tsParticle。

我希望你也可以尝试使用tsParticle.Js来获得乐趣，并为你的项目创建漂亮的图案！😊😊