在粒子.js中使用多个图像

Question

我有一个使用Particle.JS创建带有移动图像粒子的画布的项目。我目前遇到的问题是，每个图像在已经加载一定时间后都会不断重新加载。

config.json

"particles": {
"number": {
  "value": 10,
  "density": {
    "enable": false,
    "value_area": 100
  }
},
"color": {
  "value": "#ffffff"
},
"shape": {
  "type": ["image0", "image1", "image2", "image3", "image4", "image5"],
  "stroke": {
    "width": 0,
    "color": "#000000"
  },
  "polygon": {
    "nb_sides": 5
  },
  "image": {
    "src": "images/0.png",
    "width": 100,
    "height": 100
  }
},

我使用这种情况过滤掉交换机中的所有图像类型。(pJS.fn.particle.prototype.draw(

粒子.js

case (p.shape.match(/image/) || {}).input:
    if(pJS.tmp.img_type == 'svg'){
      var img_obj = p.img.obj;
    }else{
      var img_obj = pJS.tmp.img_obj;
    }
    var element = document.createElement('img');
    var number = p.shape.replace("image", "")
    element.src = './styles/eles/theme/images/particlelogo/'+number+'.png';
    img_obj = element;
    if(img_obj){
      draw();
    }
    break;

原始粒子.js github链接

Answer 1

"shape": {
  "type": "images",
  "stroke": {
    "width": 0,
    "color": "#000"
  },
  "polygon": {
    "nb_sides": 6
  },
  "images": [
    {
      "src": "img/shapes/0.svg",
      "width": 100,
      "height": 100
    },
    {
      "src": "img/shapes/1.svg",
      "width": 100,
      "height": 100
    }
  ]
},