Частицы JS - Как изменить цвет фона между линиями?

Question

Пожалуйста, мне нужна помощь...

Я должен создать частицы JS Canvas. Это не очень сложно, но мне нужно изменить цвет фона между каждой строкой так:

ПРИМЕР

Я просмотрел все настройки, предоставляемые частицами JS, но ничто не сделало то, что мне нужно... Если кто-то может мне помочь и предоставить мне какой-то код, это будет действительно любезно.

Большое вам спасибо

Answer 1

Кевин, я нашел решение. Вы можете указать цвет, используя атрибут "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 2

Я не знаю точно, как вы можете создать этот эффект с помощью 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 3

Вы можете добавить пользовательский файл css со следующим, и он должен работать.

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