Javascript 如何在（particule.js）画布上应用统一的渐变？

我一直在寻找一种简单有效的方法，将单个渐变应用于库中移动的粒子。理想情况下，我希望只使用CSS，但我现在非常确定，即使我读过关于剪辑路径的有趣内容，也不可能这样做

我的目标是实现这样的动态功能（除了AseSpirite之外，我没有真正的版本软件，请不要怪我，如果你知道一个适用于linux的矢量工具，请告诉我）：

要查看库的实现，请查看

我不使用带有particles.js（也可用）的服务器，因此我希望在链接到my.html one的app.js文件上实现一个解决方案：

/* ---- particles.js config ---- */
// default shape: circles

particlesJS("particles-js", {
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#ffffff"
      },
      "shape": {
        "type": "stroke",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "../img/particle.png",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": true,
        "anim": {
          "enable": true,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 3,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": true,
        "distance": 180,
        "color": "#ffffff",
        "opacity": 0.8,
        "width": 2
      },
      "move": {
        "enable": true,
        "speed": 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": true,
          "mode": "repulse"
        },
        "onclick": {
          "enable": false,
          "mode": "bubble"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 140,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 90,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  });

我知道也有类似的问题，但我不明白如何才能使微粒作为固定梯度的过滤器： ,

---

.

可以通过CSS和混合模式来实现这一点，但这也会影响底层元素（这里是红色背景），因此您也必须使用过滤器，最终您将拥有如此复杂的图像处理，您会发现自己在初始画布上进行处理可能更简单、更快（就性能而言），具有简单的：

particlesJS（“particlesJS”{
“粒子”：{
“编号”：{
“价值”：380，
“密度”：{
“启用”：正确，
“价值面积”：800
}
},
“颜色”：{
“值”：“#ffffff”
},
“形状”：{
“类型”：“圆圈”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：100，
“高度”：100
}
},
“不透明度”：{
“值”：0.5，
“随机”：假，
“动画”：{
“enable”：false，
“速度”：1，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：3，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：40，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“启用”：正确，
“距离”：150，
“颜色”：“ffffff”，
“不透明度”：0.4，
“宽度”：1
},
“移动”：{
“启用”：正确，
“速度”：6，
“方向”：“无”，
“随机”：假，
“直”：假，
“输出模式”：“输出”，
“反弹”：错误，
“吸引”：{
“enable”：false，
“rotateX”：600，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“抓取”
},
“onclick”：{
“启用”：正确，
“模式”：“推送”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：140，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：400，
“尺寸”：40，
“期限”：2，
“不透明度”：8，
“速度”：3
},
“拒绝”：{
“距离”：200，
“持续时间”：0.4
},
“推送”：{
“粒子”：4
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确
});
//图纸上的设置
const ctx=document.querySelector（'#particles js>canvas'）.getContext（'2d'）；
让梯度；
onresize（）；
addEventListener（'resize'，onresize）；
函数onresize（）{
grad=ctx.createLinearGradient（0,0，ctx.canvas.width，0）；
渐变加色停止（0，'黄色'）；
渐变添加颜色停止（1，“绿色”）；
}
//必须在Particles.js自己的动画循环开始后运行
//我们总是被催促着去画他们的画
请求动画帧（anim）；
函数anim（）{
ctx.fillStyle=梯度；
ctx.globalCompositeOperation=“source”；
fillRect（0,0，ctx.canvas.width，ctx.canvas.height）；
ctx.globalCompositeOperation=“源代码结束”；
请求动画帧（anim）；
}

/*----重置--*/
身体{
保证金：0；
字体：普通75%Arial，Helvetica，无衬线；
}
帆布{
显示：块；
垂直对齐：底部对齐；
}
/*----particles.js容器--*/
#粒子js{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#b61924；
背景图片：url（“”）；
背景重复：无重复；
背景尺寸：封面；
背景位置：50%50%；
}

---

好的，效果非常好，你是一个英雄，祝你有美好的一天。最后，我们可以找到更多关于线性渐变的信息以及如何使用它们。祝你有美好的一天；）