javascript - 将 ParticleJS 与 Gatsby 结合使用

Question

我正在将 ParticleJS React 组件与 gatsby 一起使用。

我首先获取npm install react-articles-js。

我从一个非常简单的例子开始:

import React from "react"
import Particles from 'react-particles-js';

export default () => (
  <div>
  <Particles params={{
        "particles": {
            "number": {
                "value": 50
            },
            "size": {
                "value": 3
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                }
            }
      }
    }}/>
  </div>

)

渲染后的 HTML 是这样的:

<div>
   <div id="tsparticles">
      <canvas class="tsparticles-canvas-el" width="3584" height="1792" style="width: 100%; height: 100%;">
      </canvas>
   </div>
</div>

仍然没有显示任何内容!我在这里遗漏了什么吗？

Answer 1

一切都已按预期进行。请注意，默认情况下 Canvas 显示的粒子是白色的。因此，如果背景是白色(就像我的情况一样)，它们将是不可见的。

将粒子更改为黑色，它们就出现了。下面是一个最小的工作示例:

<Particles
      params={{
        particles: {
          color: {
            value: "#000000"
          }
        }
      }}
    />