介绍
particles.js 是一个基于 Canvas 制作的轻量级粒子库，可以帮助前端开发者快速实现复杂的粒子效果。本文将介绍如何使用 npm 安装并使用 particles.js。
安装
首先，在你的项目目录下打开命令行工具，输入以下命令安装 particles.js：
npm install particles.js --save
使用
创建容器
在 HTML 中创建一个容器元素，用于存放粒子效果。例如：
<div id="particles-js"></div>
引入相关文件
在 HTML 的 <head> 标签中引入 particles.js 的相关文件：
-- -------------------- ---- -------
------
------- -----------------------------------------
-------
------------- -
--------- ---------
------ -----
------- -----
----------------- -----
-
--------
-------其中，/path/to/particles.min.js 是指向 particles.js 文件的路径，如果你使用 npm 安装的话，可以直接引入 node_modules 目录下的文件：
<script src="./node_modules/particles.js/particles.min.js"></script>
初始化
在 JavaScript 中，使用以下代码对粒子效果进行初始化：
-- -------------------- ---- -------
-- ---
--------------------------- -
------------ -
--------- -
-------- ---
---------- -
--------- -----
------------- ---
-
--
-------- -
-------- ---------
--
-------- -
------- ---------
--------- -
-------- --
-------- ---------
--
---------- -
----------- -
--
-------- -
------ -----------------
-------- ----
--------- ---
-
--
---------- -
-------- ----
--------- ------
------- -
--------- ------
-------- --
-------------- ----
------- -----
-
--
------- -
-------- --
--------- -----
------- -
--------- ------
-------- ---
----------- ----
------- -----
-
--
-------------- -
--------- -----
----------- ----
-------- ----------
---------- ----
-------- -
--
------- -
--------- -----
-------- --
------------ -------
--------- ------
----------- ------
----------- ------
--------- ------
---------- -
--------- ------
---------- ----
---------- ----
-
-
--
---------------- -
------------ ---------
--------- -
---------- -
--------- -----
------- ---------
--
---------- -
--------- -----
------- ------
--
--------- ----
--
-------- -
------- -
----------- ----
-------------- -
---------- -
-
--
--------- -
----------- ----
------- ---
----------- --
---------- --
-------- -
--
---------- -
----------- ---
--
------- -
--------------- -
--
--------- -
--------------- -
-
-
--
---------------- ----
---其中，第一个参数 'particles-js' 是容器元素的 ID，第二个参数是粒子效果的配置项。
配置项
particles.js 的配置项非常详细，可以实现各种复杂的粒子效果
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32351