Particles JS - 如何在行之间更改背景颜色？

Question

请帮忙...

我需要创建一个粒子JS画布。这并不是很困难，但我需要在每行之间更改背景颜色，就像这样：

例子

我浏览了粒子JS提供的所有设置，但没有任何东西能满足我的需求......如果有人能帮助我并提供一些代码，那将非常友善。

非常感谢！

- Kévin HURON

---

Kevin，你找到答案了吗？我也一直在寻找但没有成功。 - the_kaba

不行...抱歉...,最终我做了一些没有不同颜色的东西。 - Kévin HURON

Answer 1

Kevin，我找到了解决方案。您可以使用“particles”参数中的“color”属性指定颜色。以下是我的应用程序示例（我正在使用带有TypeScript的Angular）：

 <particles [style]="style" [width]="width" [height]="height" [params]="params"></particles> 

在视图方面指定参数，然后将实际参数对象添加到组件中。在我的情况下，它是：

this.params = {
      particles: {
        number: {
          value: 100,
        },
        color: {
          value: ['#858585']
        },
        line_linked: {
          color: '#f44242',
          opacity: 1
        }
      }
    };

因此，您将拥有颜色的粒子：#858585 而所有节点之间的连接将被着以颜色：＃f44242

希望能对您有所帮助！=）

- the_kaba

Answer 2

我不确定如何使用particleJS创建这种效果，但您可以尝试使用Trianglify.js，它几乎可以创建您想要的相同效果。您可以搜索使用js进行镶嵌效果，可能会找到类似于此的一些效果。如果您需要一些代码，我从Trianglify.js的快速启动代码中提取了以下代码：

Original Answer翻译成"最初的回答"

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
    width: window.innerWidth,
    height: window.innerHeight
});
document.body.appendChild(pattern.canvas())

- Cap Lee

Answer 3

您可以使用以下代码添加自定义CSS文件，这样它就可以工作了。

#particles-js {
  background-color: #f5f5f5;
}

- Dhiresh Jain