tsParticles 可用的选项会相互交互并影响彼此。你应该尝试调整值，观察它们如何影响粒子。

基于先前定义的 particles，你可以像这样修改配置的值：

<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 网站上可用的各种示例。

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

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

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

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

tsParticles 可以用于创建引人注目的背景。然而，你可能需要权衡浏览器支持、慢速网络上的加载时间以及较慢计算机上的性能等因素。

如果你想学习更多关于 JavaScript 的知识，请查看我们的 JavaScript 主题页面，那里有练习和编程项目。