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

Question

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

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

实施例

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

非常感谢你

Answer 1

我不知道如何使用粒子JS来创建此效果，但是您可以尝试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

凯文，我已经找到了解决方案。您可以使用＆＃39; color＆＃39;指定颜色。来自＆＃39;粒子的属性PARAM。这是我申请中的一个例子。 （我使用带有打字稿的角度）：

 <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;
}