如何使用tsParticles创建背景效果

来自菜鸟教程
跳转至：导航、​搜索

介绍

Particles.js 是一个允许您创建粒子效果的库。 这些是绘制在画布上的形状和对象，具有观察某些物理行为和交互性的能力。 这对于在不需要插图或摄影的情况下创建引人注目的背景很有用。

注意： 原始 repo 的开发似乎已停止。 最近创建了一个名为 tsParticles 的分叉。 本教程的内容已更新为使用这个新的分叉。


在本教程中，您将简要介绍该库的一些功能以及加载和修改示例配置。

先决条件

要完成本教程，您需要：

  • 现代网络浏览器。
  • 熟悉 JSON 可能有助于理解配置文件。 参考JSON简介。

第 1 步 — 设置项目

出于教程目的，此示例将重点关注本地 index.html 文件和内容交付网络 (CDN) 托管的 tsParticles 库的副本。

在您的终端窗口中，创建一个新的项目目录： 

mkdir tsparticles-example

然后，导航到新的项目目录： 

cd tsparticles-example

接下来，创建一个 index.html 文件：

索引.html 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>tsParticles</title>
  <style>
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #212121;
  }
</style>
</head>

<body>
</body>
</html>

该库将需要一个 div 和一个 id 来连接画布。 将新的 <div id="tsparticles"> 添加到 body：

索引.html 

<body>
 <div id="tsparticles"></div>
</body>

然后，将 CDN 托管的库添加到 body：

索引.html 

<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>
</body>

笔记： tsparticles.js is also available via npm: 

npm install tsparticles

接下来，通过指定应该挂钩的 id 来初始化 tsParticles（在本例中为 tsparticles）：

索引.html 

<body>
  <div id="tsparticles"></div>

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.1/tsparticles.min.js"
    integrity="sha512-PYHWDEuXOTJ9MZ+/QHqkbgiEYZ+LImQv3i/9NyYOABFvK37e4q4Wg7aQDN1JpoGiEu1TYZh6JMrZluZox2gbDA=="
    crossorigin="anonymous"
  ></script>

  <script>
    tsParticles.load('tsparticles');
  </script>
</body>

在网络浏览器中访问 index.html 时，您应该观察到几个随机散布在网页上的粒子。 验证到目前为止的一切是否按预期工作，您可以继续添加自定义选项。

第 2 步 — 加载配置

库文档列出了许多可用的 选项。 这些包括 background、interactivity、particles 等。

首先，复制 default.json 并将其粘贴为 particles：

索引.html 

<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff0000",
        "animation": {
          "enable": true,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0
        },
        "polygon": {
          "nb_sides": 5
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": true,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#000000",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles');
</script>

在 tsParticles.load() 调用中使用这个新变量： 

<script>
  // ...

  tsParticles.load('tsparticles', particles);
</script>

在网络浏览器中访问 index.html 时，您应该观察到由线条连接并穿过屏幕的小圆圈。

第 3 步 — 自定义配置

tsParticles 可用的选项相互影响。 您应该尝试调整值并查看它们如何影响粒子。

使用前面定义的 particles，您可以像这样修改配置的值：

索引.html 

<script>
  const particles = {
    "fpsLimit": 60,
    "particles": {
      "number": {
        "value": 40,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ff9800",
        "animation": {
          "enable": false,
          "speed": 20,
          "sync": true
        }
      },
      "shape": {
        "type": "polygon",
        "stroke": {
          "width": 2
        },
        "polygon": {
          "nb_sides": 6
        },
      },
      "opacity": {
        "value": 0.5,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 3,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": <^>20<>,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 20,
          "size_min": 0.1,
          "sync": false
        }
      },
      "links": {
        "enable": false,
        "distance": 100,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "down",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 0.8
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "background": {
      "color": "#ffffff",
      "image": "",
      "position": "50% 50%",
      "repeat": "no-repeat",
      "size": "cover"
    }
  };

  tsParticles.load('tsparticles', particles);
</script>

此代码更改将使背景 color 切换为白色。 它还将粒子的 shape 从圆形更改为六边形（六边形多边形）。 更改了多边形的 number 和 size。 链接的行已被删除。 direction 从 none 更改为 bottom。

在网络浏览器中访问 index.html 时，您应该看到金色的六边形在页面下方层叠。

试验配置

为了更广泛地了解该库提供的潜力，您可以查看 tsParticles 站点上提供的各种 Samples。

使用下拉菜单选择一个有趣的样本。 您可以使用此页面上的编辑器来修改值。 然后单击 Reload 以查看更改。

如果要导出更改，请单击 More，然后单击 Export Config。 这将以 JSON 格式显示配置。

注意： 其中一些演示可能需要额外的依赖项。 例如，Font Awesome 示例需要 Font Awesome 库。


花一些时间将这些新配置分配给 index.html 中早期的 particle 变量，并在 Web 浏览器中刷新页面。

结论

在本教程中，您学习了如何在本地使用 tsParticles 库（以前称为 Particles.js）。

tsParticles 可用于醒目的背景。 但是，您可能需要权衡浏览器支持、慢速网络上的加载时间以及较慢计算机上的性能等因素。

如果您想了解有关 JavaScript 的更多信息，请查看 我们的 JavaScript 主题页面 以获取练习和编程项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用tsParticles创建背景效果&oldid=26872”
Powered by MediaWiki