粒子JS - 如何更改线条之间的背景颜色？

Question

拜托，我需要帮助......

我必须创建一个粒子JS画布。这不是很难，但我必须改变每行之间的背景颜色，如下所示：

示例

我浏览了粒子JS提供的所有设置，但没有像我需要的那样......如果有人可以帮助我并提供一些代码，那将非常友好。

非常感谢你

Answer 1

我不知道你怎么能用particleJS创建这个效果，但你可以尝试Trianglify.js，它几乎可以产生你想要的相同效果。您可以使用js查找曲面细分效果，您可能会发现一些与此类似的效果。如果您需要一些代码，我可以从Trianglify.js的快速入门代码中删除它：

<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())

Answer 2

凯文，我找到了解决方案。您可以使用'particles'参数中的'color'属性指定颜色。这是我的申请中的一个例子。 （我正在使用带有打字稿的角度）：

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

在视图端指定params，然后在组件内添加实际的params对象。在我的情况下它是：

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

因此，您将拥有颜色的粒子：＃858585并且节点之间的所有连接都将着色为：＃f44242

希望能帮助到你！ =）

Answer 3

您可以使用以下内容添加自定义css文件，它应该可以使用。

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