particlesJs手册

quick start

首先需要引用particles.js，然后创建一个空元素。

    <div id="particles"></div>
          ......
    <script src="particles.js"></script>
  

然后在js中写配置就可以了

particlesJS.load('particles', {
    ......
}); 

先展示完整的配置项示例，之后附上完整的api。

    {
          "particles": {
            "number": {
              "value": 300,
              "density": {
                "enable": true,
                "value_area": 700
              }
            },
            "color": {
              "value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"]
            },
            "shape": {
              "type": "edge",
              "stroke": {
                "width": 0,
                "color": "#000000"
              },
              "polygon": {
                "nb_sides": 15
              }
            },
            "opacity": {
              "value": 0.5,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1.5,
                "opacity_min": 0.15,
                "sync": false
              }
            },
            "size": {
              "value": 2.5,
              "random": false,
              "anim": {
                "enable": true,
                "speed": 2,
                "size_min": 0.15,
                "sync": false
              }
            },
            "line_linked": {
              "enable": true,
              "distance": 110,
              "color": "#33b1f8",
              "opacity": 0.25,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 1.6,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "bounce": false,
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": false,
                "mode": "repulse"
              },
              "onclick": {
                "enable": false,
                "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200,
                "duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true
        }

Api手册