如何在按钮点击时获取tsParticles粒子的当前颜色？

问题原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'particles')错误，是因为tsParticles的API设计和旧版particlesJS完全不同：全局对象tsParticles并没有直接暴露options属性，你试图访问的tsParticles.options是undefined，自然无法读取后续的particles字段。

解决方案 #

tsParticles中，每个粒子容器实例才持有对应的配置选项。你需要先保存初始化后返回的容器实例，再通过实例访问配置中的颜色值。

修改后的代码示例 #

// 声明变量保存粒子容器实例
let particlesContainer;

// 初始化粒子并保存容器实例
tsParticles.load("tsparticles", {
  particles: {
    color: {
      value: "#ff0000",
      animation: {
        enable: false,
        speed: 20,
        sync: true
      }
    }
  }})
.then(container => {
  // 初始化完成后，将容器实例存入变量
  particlesContainer = container;
});

thirdButton.addEventListener("click", function() {
  console.log("Button clicked");
  // 确保容器实例已加载完成
  if (!particlesContainer) {
    console.warn("粒子容器尚未初始化完成");
    return;
  }
  // 从容器实例的options中读取颜色值
  let currentColor = particlesContainer.options.particles.color.value;
  console.log(currentColor);
  particle_colorchange(currentColor);
});

补充：读取动态修改后的粒子实际颜色 #

如果你的粒子颜色是通过动画或API动态修改的（而非仅初始配置），需要直接从粒子实例中读取实际颜色：

thirdButton.addEventListener("click", function() {
  if (!particlesContainer) return;
  // 获取第一个粒子实例（如果粒子数量大于0）
  const targetParticle = particlesContainer.particles.array[0];
  if (targetParticle) {
    const currentColor = targetParticle.color.value;
    console.log(currentColor);
    particle_colorchange(currentColor);
  }
});

内容的提问来源于stack exchange，提问作者fallouthase