企业官网建设流程全解析

tsParticles Poison & Venom 调色板：为粒子特效注入毒液主题色系

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

导读

本文介绍 tsParticles 生态中的@tsparticles/palette-poison-and-venom调色板插件，它定义了一组以"毒液 / 毒药"为主题的深色背景与高饱和荧光色系，可让粒子、彩带、烟花等特效立即呈现剧毒般的神秘观感。读完本文，你将掌握该调色板的全部色值、加载方式、与基础包@tsparticles/basic的搭配用法、自定义覆盖技巧，以及它背后通过引擎插件机制注册调色板的实现原理。

上图是 palettes/fantasy/poisonAndVenom/images/sample.png 展示的运行效果：纯黑背景上散布着酸性黄绿与神秘紫的荧光粒子，与"毒液 / 毒药"主题高度契合。

调色板是什么：只定义颜色，不定义行为

在 tsParticles 中，调色板（Palette）只定义颜色，不包含完整的粒子行为。正如 palettes/fantasy/poisonAndVenom/README.md 明确指出的："A palette defines colors, not complete behavior, so pair it with a runtime package and particle options."（调色板定义颜色而非完整行为，因此需要搭配运行时包与粒子配置使用）。

这一点可以从引擎的类型定义中得到印证。IPalette 接口 的字段为：

其中IPaletteColorsFill支持enable（是否启用）、opacity（透明度范围）与value（单个或多个色值），IPaletteColorsStroke还额外支持width（描边宽度范围）。也就是说，调色板只负责"配色方案"，粒子的数量、形状、运动等仍需在粒子配置中给出。

色值一览：Poison & Venom 的完整配色

本调色板的实际定义位于 palettes/fantasy/poisonAndVenom/src/options.ts，具体如下：

除色值外，该调色板还规定了两个重要的渲染参数：

• Blend mode（混合模式）：source-over，即默认的 Canvas 源覆盖合成模式；
• Fill（填充）：true，表示粒子使用填充色进行绘制。

快速上手清单

按照 palettes/fantasy/poisonAndVenom/README.md 的 Quick checklist，接入共分三步：

1. 安装@tsparticles/engine（或直接使用下面的 CDN bundle）；
2. 加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadPoisonAndVenomPalette注册调色板；
3. 在 options 中应用该调色板，同时附上一份最小的粒子配置。

注意：调色板不会自动为粒子配置形状、运动等行为，必须自己补充基础的 particles 配置，否则画面无法按预期呈现。

使用方法：CDN / 原生 JavaScript / jQuery

以浏览器直引方式接入时，需要依次引入引擎基础包与调色板脚本（注意第二个脚本的@4版本号需与基础包一致）：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-poisonAndVenom@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

说明：该调色板包发布的 CDN 文件名沿用了早期coloredSmokeAmber的命名（见 package.json 与 README 中的脚本地址），实际加载的是同一个 Poison & Venom 调色板。

初始化示例

脚本加载完成后，即可按如下方式初始化tsParticles：

(async engine => { await loadBasic(engine); await loadPoisonAndVenomPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "poisonAndVenom", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段配置的关键点：

• await loadBasic(engine)先加载基础运行时；
• await loadPoisonAndVenomPalette(engine)将调色板注册进引擎（必须发生在load之前）；
• options.palette指向调色板名称"poisonAndVenom"；
• particles中自行指定了 200 个圆形粒子、尺寸范围 10~15、移动速度 2，这些行为参数是调色板之外需要自备的部分。

自定义与覆盖

与任何标准 tsParticles 安装一样，所有选项都可以被覆盖。你可以直接修改 options 中对应的属性（例如把particles.size调大、把move.speed改为随机值，或增加links、color等配置），调色板提供的默认配色会被你的显式配置取代。这也意味着你可以把 Poison & Venom 的色系当作起点，再按业务需要自由扩展。

使用 React、Vue 等框架组件库

如果你使用 React、Vue 2.x / 3.x、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等带有 tsParticles 组件库的框架，接入方式类似：在对应组件库文档中，找到初始化逻辑并调用loadPoisonAndVenomPalette函数即可。仓库的 wrappers 目录下保存了各框架的封装实现，可作为接入参考。

源码级原理：调色板是如何注册的

理解底层机制有助于排查问题。该调色板的入口在 palettes/fantasy/poisonAndVenom/src/index.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "poison-and-venom"; export async function loadPoisonAndVenomPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

关键信息：

• 调色板的内部注册名是"poison-and-venom"（连字符形式），而 options 中使用的palette: "poisonAndVenom"与之对应；
• loadPoisonAndVenomPalette本质是通过 PluginManager.addPalette 将调色板注册为引擎插件，注册发生在插件管理器层，因此必须在engine.load(...)之前完成；
• 实际色值数据来自 options.ts 中的IPalette对象：背景#030802、混合模式source-over、填充启用、7 个色值。

此外，src/index.lazy.ts 提供了懒加载版本（配合@tsparticles/engine/lazy使用，运行时才动态import色值模块），适合需要进一步控制首屏体积的场景；src/browser.ts 则负责把loadPoisonAndVenomPalette挂载到全局对象上，供浏览器脚本方式调用。

延伸阅读

• 调色板的包元数据与导出结构（ESM / CJS / UMD / lazy 子路径）：palettes/fantasy/poisonAndVenom/package.json
• 引擎中调色板插件的类型定义：engine/src/Core/Interfaces/IPalette.ts
• 引擎插件管理器（addPalette的注册实现）：engine/src/Core/Utils/PluginManager.ts
• 同主题下更多幻想系调色板（生物荧光、精灵尘、圣光、冰系魔法、美人鱼、独角兽等）：palettes/fantasy

如需探索更多调色板与预设的组合用法，可查阅仓库 palettes 目录下各子主题的实现与示例。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles