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

Posted 2023-04-14

【中文标题】Particles JS - 如何更改线条之间的背景颜色？

【英文标题】：Particles JS - How to change background color between lines?

【发布时间】：2018-01-25 15:39:37

【问题描述】：

拜托，我需要帮助...

我必须创建一个粒子 JS 画布。这并不难，但我必须像这样更改每行之间的背景颜色：

示例

我浏览了粒子 JS 提供的所有设置，但没有做我需要的事情...... 如果有人可以帮助我并提供一些代码，那就太好了。

非常感谢

【问题讨论】：

凯文，你喜欢这个答案吗？我也在寻找它没有成功..

不...对不起...，最后我做了一些没有不同颜色的东西

【参考方案1】：

凯文，我找到了解决方案。您可以使用“粒子”参数中的“颜色”属性指定颜色。这是我的应用程序中的一个示例。 （我在打字稿中使用角度）：

 <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

希望对您有所帮助！ =)

【参考方案2】：

我不确切知道如何使用particleJS 创建此效果，但您可以尝试Trianglify.js，它几乎可以创建您想要的相同效果。你可以用js查找tessellation effect，你可能会发现一些类似的效果。如果你想要一些代码，我从 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())

【参考方案3】：

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

#particles-js 
  background-color: #f5f5f5;