本文详解如何在 tsparticles（v2+）中安全、异步地访问已加载粒子实例的当前颜色配置，避免因选项未就绪导致的 `cannot read properties of undefined` 错误，并提供可直接运行的代码示例与关键注意事项。
tsParticles 采用异步初始化机制，其 load() 方法返回一个 Promise，不会立即挂载 options 到全局对象上——这正是你遇到 tsParticles.options.particles.color.value is undefined 的根本原因。直接访问 tsParticles.options 会失败，因为 tsParticles 全局对象本身不持有运行时容器的配置，真正的配置存在于每个粒子容器（Container 实例）内部。
✅ 正确做法是：在 load() 的 .then() 回调中获取返回的 container 对象，再从中读取 container.options.particles.color。该 color 字段可能为字符串（如 "#ff0000"）、数组（多色配置）或 IColor 对象，需根据实际配置结构安全解析。
以下是完整可运行的示例代码：
<div id="tsparticles"></div>
<button id="thirdButton">获取当前粒子颜色</button>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/dist/tsparticles.bundle.min.js"></script>
<script>
let currentContainer = null;
// 初始化并保存 container 实例
tsParticles
.load("tsparticles", {
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true
}
},
number: { value: 30 },
size: { value: 3 }
},
background: { color: "#000" }
})
.then((container) => {
currentContainer = container; // 缓存 container，供后续点击使用
console.log("Particles loaded successfully.");
});
// 按钮点击事件：安全读取当前颜色
document.getElementById("thirdButton").addEventListener("click", function () {
if (!currentContainer) {
console.warn("Particles not loaded yet. Please wait for initialization.");
return;
}
const colorConfig = currentContainer.options.particles.color;
// 支持多种 color 配置格式：string / array / object
let currentColor = "#000000";
if (typeof colorConfig.value === "string") {
currentColor = colorConfig.value;
} else if (Array.isArray(colorConfig.value)) {
// 取第一个颜色（适用于多色轮播场景）
currentColor = colorConfig.value[0] || "#000000";
} else if (colorConfig.value && typeof colorConfig.value === "object") {
// 若为 { r: 255, g: 0, b: 0 } 格式，转为十六进制
const { r = 0, g = 0, b = 0 } = colorConfig.value;
currentColor = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}
console.log("Current particle color:", currentColor);
particle_colorchange(currentColor); // 你的自定义处理函数
});
// 示例处理函数（请按需替换）
function particle_colorchange(hexColor) {
document.body.style.backgroundColor = hexColor;
alert(`背景色已切换为：${hexColor}`);
}
</script>⚠️ 关键注意事项：
- 永远不要依赖 tsParticles.options：它不是公共 API，且在 v2+ 中已被移除；所有运行时配置必须通过 Container 实例访问；
- 务必缓存 container：load() 返回的 container 是唯一权威来源，建议在 .then() 中保存为模块级变量（如 currentContainer），以便后续交互使用；
- 颜色值类型需动态判断：color.value 可能是字符串、数组或 RGB 对象，应做类型检查后再提取；
- 动画中颜色可能动态变化：若启用了 color.animation.enable: true，options.particles.color.value 仅表示初始/静态配置值；如需实时渲染色值（如粒子实际显示的瞬时颜色），需遍历 container.particles.array 并读取每个粒子的 particle.color.value（更复杂，需额外处理）。
掌握这一模式后，你不仅能准确读取颜色，还可扩展访问其他动态属性（如数量、大小、运动轨迹等），真正发挥 tsParticles 强大的可编程控制能力。
