拓冰网站定制 
tsParticles PrismSpectrum 调色板光学光谱配色的注册机制、配置参数与源码解析【免费下载链接】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/tsparticlestsParticles 的调色板Palette机制用于把一套完整的颜色方案前景色、背景色、混合模式封装成可复用的主题单元。本文以palettes/optics/prismSpectrum目录下的 Prism Spectrum棱镜光谱调色板为核心完整讲解它的 7 色光谱配置、blendMode: screen发光叠加方案、在原生 JS / CDN / 框架组件中的接入方式并结合引擎源码剖析loadPrismSpectrumPalette的注册链路和调色板在渲染选项中的生效原理。读完本文你可以直接复制一套可运行的光谱粒子背景并理解调色板从注册到生效的完整调用链。一、调色板定位光学主题下的棱镜光谱Prism Spectrum 位于调色板仓库的optics光学分类目录下目录结构如下src/options.ts调色板颜色定义唯一的数据核心src/index.ts常规加载入口src/index.lazy.ts懒加载入口src/browser.ts浏览器环境入口package.jsonNPM 包元信息按照 README 的定义该调色板模拟白光经过棱镜后分解出的可见光谱色由红、橙、黄、绿、蓝、靛、紫 7 个纯色组成在纯黑背景上以screen滤色混合模式叠加呈现出加色混合的光学发光效果——这正是屏幕发光体自发光粒子的着色模型。颜色方案完整清单角色色值说明前景色 1#FF0000红Red前景色 2#FF7700橙Orange前景色 3#FFFF00黄Yellow前景色 4#00FF00绿Green前景色 5#0000FF蓝Blue前景色 6#4B0082靛/深靛蓝Indigo前景色 7#EE82EE紫/兰花紫Violet背景色#000000纯黑衬托发光色混合模式screen滤色混合粒子重叠处亮度相加填充fill: true启用填充色不使用描边色颜色数据在 options.ts 中定义全部为满饱和度纯色这是光谱类配色的典型特征每个色相独立且互不混色粒子逐个取色后天然形成彩虹分层。二、IPalette 数据结构调色板的类型契约调色板在引擎中的类型定义位于 engine/src/Core/Interfaces/IPalette.ts包含四个字段/** Color palette definition */ export interface IPalette { /** Background color */ background: string; // 背景色 /** Canvas blend mode */ blendMode: GlobalCompositeOperation; // Canvas 合成模式 /** Palette colors, single or multiple sets */ colors: SingleOrMultipleIPaletteColors; // 颜色组fill/stroke 可选 /** Palette name */ name: string; // 调色板显示名 }其中colors支持fill填充与stroke描边两个子配置fillenable: boolean、opacity?: RangeValue、value: SingleOrMultiplestringstrokevalue、width: RangeValue、opacity?: RangeValueSingleOrMultipleT的泛型设计意味着一个调色板可以携带多组颜色方案引擎会从中随机选取一组应用。Prism Spectrum 只定义了单组fill配置// palettes/optics/prismSpectrum/src/options.ts import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Prism Spectrum, background: #000000, blendMode: screen, colors: { fill: { enable: true, value: [ #FF0000, #FF7700, #FFFF00, #00FF00, #0000FF, #4B0082, #EE82EE, ], }, }, };注意两个设计细节调色板只定义颜色不定义粒子行为——粒子数量、运动速度、尺寸等仍由标准粒子选项控制。README 的 Quick checklist 也明确提醒“A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.”blendMode直接映射到 Canvas 的GlobalCompositeOperationscreen模式让同色粒子叠加时趋向白色、异色叠加时产生中间色配合黑底形成“自发光”观感。三、安装与接入Quick Checklist 与 CDN 用法接入三步骤README 给出的标准接入流程安装tsparticles/engine或使用下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadPrismSpectrumPalette在 options 中引用调色板名并搭配最小粒子配置对应 package.json 的信息包名tsparticles/palette-prism-spectrum注意 npm 包名使用连字符当前版本4.3.3唯一运行时依赖tsparticles/engineworkspace 引用产物入口main指向 CJS、module/import指向 ESM、browser指向浏览器构建另外提供./lazy子导出对应懒加载入口构建脚本pnpm build调用 monorepo 内共享的tsparticles-buildCLICDN / Vanilla JS / jQueryREADME 给出的 CDN 接入方式为通过 jsDelivr 引入基础运行时与调色板两个脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-prismSpectrum4/tsparticles.palette-coloredSmokeAmber.min.js/script这里有一处需要结合源码核实的细节README 中第二个脚本的文件名沿用了coloredSmokeAmber另一款调色板的模板残留而 src/index.ts 中注册的调色板名为prism-spectrumnpm 包名也是tsparticles/palette-prism-spectrum。从源码结构看实际部署的 CDN 文件应与prism-spectrum包名对应引用前建议以该包 dist 产物的实际文件名tsparticles.palette-prismSpectrum.min.js一类命名为准核实。原生 JS 完整示例README 提供的可直接运行的示例继承自原文档选项注释已补全(async engine { await loadBasic(engine); await loadPrismSpectrumPalette(engine); const options { particles: { number: { value: 200 }, // 粒子总数 shape: { type: circle }, // 圆形粒子 size: { value: { min: 10, max: 15 } }, // 尺寸区间 10~15px move: { enable: true, // 启用运动 speed: 2, // 移动速度 }, }, palette: prismSpectrum, // 启用调色板 }; await engine.load({ id: tsparticles, options, }); })(tsParticles);示例中的粒子配置刻意保持最小化200 个 10~15px 的圆形粒子以速度 2 移动颜色完全交给palette字段驱动。README 同时强调所有选项都可以像标准 tsParticles 项目一样自由覆盖You can override all the options defining the properties like in any standard tsParticles installation调色板只是颜色层面的预设不会锁定粒子行为。名称一致性提示README 示例中使用的引用键是palette: prismSpectrum而 src/index.ts 中实际注册到 PluginManager 的键是paletteName prism-spectrum。若按源码注册名找不到调色板请优先以源码注册名为准。框架组件接入对于 React、Vue 2/3、Angular、Svelte、Preact、Solid、Qwik、Lit、Riot、Web Components 等已提供 tsParticles 组件库的框架README 的指引是查看组件库仓库的文档并在初始化时调用loadPrismSpectrumPalette函数。本仓库的 wrappers 目录下即收录了各框架组件库demo 目录提供了对应框架的演示工程可供参照。四、源码解析loadPrismSpectrumPalette 的注册机制常规加载入口src/index.ts 全部逻辑只有 14 行import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName prism-spectrum; export async function loadPrismSpectrumPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链分两步engine.pluginManager.register(fn)将注册回调登记到引擎的插件管理器中引擎可能在初始化完成后统一执行这些回调回调内部调用e.pluginManager.addPalette(paletteName, options)把调色板写入注册表。addPalette的实现位于 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }即一个以名称为键的Map存表查询侧对应getPalette(name): IPalette | undefinedPluginManager.ts。懒加载入口src/index.lazy.ts 与常规入口的唯一区别是把options的静态 import 换成了回调内的动态import(./options.js)export async function loadPrismSpectrumPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }配合 package.json 中的./lazyexports 子路径打包器可以通过tsparticles/palette-prism-spectrum/lazy引入该入口把调色板数据代码切分为独立 chunk仅在真正注册时加载——对同时引入多套调色板的页面是有意义的体积优化手段。五、调色板如何生效从 palette 字符串到渲染选项调色板字符串到实际渲染的桥梁在引擎的选项类中。engine/src/Options/Classes/Options.ts 的#importPalette私有方法展示了完整转换逻辑#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background }, // 背景色 → options.background blend: { enable: true, mode: paletteData.blendMode }, // 混合模式 → blend 插件 particles: { palette }, // 标记粒子选项关联该调色板 }); }三个映射关系一目了然IPalette.background#000000→ 全局背景色配置IPalette.blendModescreen→ 自动启用blend插件并设为screen调色板名称回写到particles.palette粒子级取色时由 ParticlesOptions.ts 再次通过getPalette读取该调色板的colors.fill.value对每个粒子随机取色。因此“启用一个调色板”本质上是一次深合并deep merge式的选项加载调色板只提供背景、混合模式和颜色三个维度的默认值之后任何显式配置例如手动覆盖background或某个粒子的color仍按标准合并规则优先生效。这也解释了为什么官方文档反复强调调色板“只定义颜色不定义完整行为”。若getPalette查不到名称如拼写错误或未先调用loadPrismSpectrumPalette#importPalette会静默return粒子将回退到默认颜色——排查“调色板不生效”问题时应先确认加载函数已在engine.load之前执行。六、小结与延伸阅读数据核心7 色满饱和光谱 黑底 screen混合 fill 填充定义于 options.ts类型契约为 IPalette注册链路loadPrismSpectrumPalette→pluginManager.register→addPalette(prism-spectrum, options)另有 index.lazy.ts 提供代码分割版本生效链路options.palette→#importPalette→ 写入 background / blend / particles.palette 三段配置粒子逐个从colors.fill.value随机取色使用方式CDN 双脚本、原生 JS 最小配置、框架组件调用同一loadPrismSpectrumPalette函数三条路径均可行且所有选项可自由覆盖。如需了解同目录其他光学/氛围类调色板的差异如atmosphere、space等分类可以对照 palettes/ 目录下各调色板的src/options.ts横向比较颜色组与blendMode的选择调色板整体目录结构遵循统一的 monorepo 规范package.jsonrollup.config.js 多 tsconfig 构建矩阵由共享 CLIcli/ 中的构建命令统一产出。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 tsParticles PrismSpectrum 调色板：光学光谱配色的注册机制、配置参数与源码解析
tsParticles PrismSpectrum 调色板光学光谱配色的注册机制、配置参数与源码解析【免费下载链接】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/tsparticlestsParticles 的调色板Palette机制用于把一套完整的颜色方案前景色、背景色、混合模式封装成可复用的主题单元。本文以palettes/optics/prismSpectrum目录下的 Prism Spectrum棱镜光谱调色板为核心完整讲解它的 7 色光谱配置、blendMode: screen发光叠加方案、在原生 JS / CDN / 框架组件中的接入方式并结合引擎源码剖析loadPrismSpectrumPalette的注册链路和调色板在渲染选项中的生效原理。读完本文你可以直接复制一套可运行的光谱粒子背景并理解调色板从注册到生效的完整调用链。一、调色板定位光学主题下的棱镜光谱Prism Spectrum 位于调色板仓库的optics光学分类目录下目录结构如下src/options.ts调色板颜色定义唯一的数据核心src/index.ts常规加载入口src/index.lazy.ts懒加载入口src/browser.ts浏览器环境入口package.jsonNPM 包元信息按照 README 的定义该调色板模拟白光经过棱镜后分解出的可见光谱色由红、橙、黄、绿、蓝、靛、紫 7 个纯色组成在纯黑背景上以screen滤色混合模式叠加呈现出加色混合的光学发光效果——这正是屏幕发光体自发光粒子的着色模型。颜色方案完整清单角色色值说明前景色 1#FF0000红Red前景色 2#FF7700橙Orange前景色 3#FFFF00黄Yellow前景色 4#00FF00绿Green前景色 5#0000FF蓝Blue前景色 6#4B0082靛/深靛蓝Indigo前景色 7#EE82EE紫/兰花紫Violet背景色#000000纯黑衬托发光色混合模式screen滤色混合粒子重叠处亮度相加填充fill: true启用填充色不使用描边色颜色数据在 options.ts 中定义全部为满饱和度纯色这是光谱类配色的典型特征每个色相独立且互不混色粒子逐个取色后天然形成彩虹分层。二、IPalette 数据结构调色板的类型契约调色板在引擎中的类型定义位于 engine/src/Core/Interfaces/IPalette.ts包含四个字段/** Color palette definition */ export interface IPalette { /** Background color */ background: string; // 背景色 /** Canvas blend mode */ blendMode: GlobalCompositeOperation; // Canvas 合成模式 /** Palette colors, single or multiple sets */ colors: SingleOrMultipleIPaletteColors; // 颜色组fill/stroke 可选 /** Palette name */ name: string; // 调色板显示名 }其中colors支持fill填充与stroke描边两个子配置fillenable: boolean、opacity?: RangeValue、value: SingleOrMultiplestringstrokevalue、width: RangeValue、opacity?: RangeValueSingleOrMultipleT的泛型设计意味着一个调色板可以携带多组颜色方案引擎会从中随机选取一组应用。Prism Spectrum 只定义了单组fill配置// palettes/optics/prismSpectrum/src/options.ts import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Prism Spectrum, background: #000000, blendMode: screen, colors: { fill: { enable: true, value: [ #FF0000, #FF7700, #FFFF00, #00FF00, #0000FF, #4B0082, #EE82EE, ], }, }, };注意两个设计细节调色板只定义颜色不定义粒子行为——粒子数量、运动速度、尺寸等仍由标准粒子选项控制。README 的 Quick checklist 也明确提醒“A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.”blendMode直接映射到 Canvas 的GlobalCompositeOperationscreen模式让同色粒子叠加时趋向白色、异色叠加时产生中间色配合黑底形成“自发光”观感。三、安装与接入Quick Checklist 与 CDN 用法接入三步骤README 给出的标准接入流程安装tsparticles/engine或使用下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadPrismSpectrumPalette在 options 中引用调色板名并搭配最小粒子配置对应 package.json 的信息包名tsparticles/palette-prism-spectrum注意 npm 包名使用连字符当前版本4.3.3唯一运行时依赖tsparticles/engineworkspace 引用产物入口main指向 CJS、module/import指向 ESM、browser指向浏览器构建另外提供./lazy子导出对应懒加载入口构建脚本pnpm build调用 monorepo 内共享的tsparticles-buildCLICDN / Vanilla JS / jQueryREADME 给出的 CDN 接入方式为通过 jsDelivr 引入基础运行时与调色板两个脚本script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-prismSpectrum4/tsparticles.palette-coloredSmokeAmber.min.js/script这里有一处需要结合源码核实的细节README 中第二个脚本的文件名沿用了coloredSmokeAmber另一款调色板的模板残留而 src/index.ts 中注册的调色板名为prism-spectrumnpm 包名也是tsparticles/palette-prism-spectrum。从源码结构看实际部署的 CDN 文件应与prism-spectrum包名对应引用前建议以该包 dist 产物的实际文件名tsparticles.palette-prismSpectrum.min.js一类命名为准核实。原生 JS 完整示例README 提供的可直接运行的示例继承自原文档选项注释已补全(async engine { await loadBasic(engine); await loadPrismSpectrumPalette(engine); const options { particles: { number: { value: 200 }, // 粒子总数 shape: { type: circle }, // 圆形粒子 size: { value: { min: 10, max: 15 } }, // 尺寸区间 10~15px move: { enable: true, // 启用运动 speed: 2, // 移动速度 }, }, palette: prismSpectrum, // 启用调色板 }; await engine.load({ id: tsparticles, options, }); })(tsParticles);示例中的粒子配置刻意保持最小化200 个 10~15px 的圆形粒子以速度 2 移动颜色完全交给palette字段驱动。README 同时强调所有选项都可以像标准 tsParticles 项目一样自由覆盖You can override all the options defining the properties like in any standard tsParticles installation调色板只是颜色层面的预设不会锁定粒子行为。名称一致性提示README 示例中使用的引用键是palette: prismSpectrum而 src/index.ts 中实际注册到 PluginManager 的键是paletteName prism-spectrum。若按源码注册名找不到调色板请优先以源码注册名为准。框架组件接入对于 React、Vue 2/3、Angular、Svelte、Preact、Solid、Qwik、Lit、Riot、Web Components 等已提供 tsParticles 组件库的框架README 的指引是查看组件库仓库的文档并在初始化时调用loadPrismSpectrumPalette函数。本仓库的 wrappers 目录下即收录了各框架组件库demo 目录提供了对应框架的演示工程可供参照。四、源码解析loadPrismSpectrumPalette 的注册机制常规加载入口src/index.ts 全部逻辑只有 14 行import { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName prism-spectrum; export async function loadPrismSpectrumPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }调用链分两步engine.pluginManager.register(fn)将注册回调登记到引擎的插件管理器中引擎可能在初始化完成后统一执行这些回调回调内部调用e.pluginManager.addPalette(paletteName, options)把调色板写入注册表。addPalette的实现位于 engine/src/Core/Utils/PluginManager.tsaddPalette(name: string, palette: IPalette): void { this.palettes.set(name, palette); }即一个以名称为键的Map存表查询侧对应getPalette(name): IPalette | undefinedPluginManager.ts。懒加载入口src/index.lazy.ts 与常规入口的唯一区别是把options的静态 import 换成了回调内的动态import(./options.js)export async function loadPrismSpectrumPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(async e { const { options } await import(./options.js); e.pluginManager.addPalette(paletteName, options); }); }配合 package.json 中的./lazyexports 子路径打包器可以通过tsparticles/palette-prism-spectrum/lazy引入该入口把调色板数据代码切分为独立 chunk仅在真正注册时加载——对同时引入多套调色板的页面是有意义的体积优化手段。五、调色板如何生效从 palette 字符串到渲染选项调色板字符串到实际渲染的桥梁在引擎的选项类中。engine/src/Options/Classes/Options.ts 的#importPalette私有方法展示了完整转换逻辑#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background }, // 背景色 → options.background blend: { enable: true, mode: paletteData.blendMode }, // 混合模式 → blend 插件 particles: { palette }, // 标记粒子选项关联该调色板 }); }三个映射关系一目了然IPalette.background#000000→ 全局背景色配置IPalette.blendModescreen→ 自动启用blend插件并设为screen调色板名称回写到particles.palette粒子级取色时由 ParticlesOptions.ts 再次通过getPalette读取该调色板的colors.fill.value对每个粒子随机取色。因此“启用一个调色板”本质上是一次深合并deep merge式的选项加载调色板只提供背景、混合模式和颜色三个维度的默认值之后任何显式配置例如手动覆盖background或某个粒子的color仍按标准合并规则优先生效。这也解释了为什么官方文档反复强调调色板“只定义颜色不定义完整行为”。若getPalette查不到名称如拼写错误或未先调用loadPrismSpectrumPalette#importPalette会静默return粒子将回退到默认颜色——排查“调色板不生效”问题时应先确认加载函数已在engine.load之前执行。六、小结与延伸阅读数据核心7 色满饱和光谱 黑底 screen混合 fill 填充定义于 options.ts类型契约为 IPalette注册链路loadPrismSpectrumPalette→pluginManager.register→addPalette(prism-spectrum, options)另有 index.lazy.ts 提供代码分割版本生效链路options.palette→#importPalette→ 写入 background / blend / particles.palette 三段配置粒子逐个从colors.fill.value随机取色使用方式CDN 双脚本、原生 JS 最小配置、框架组件调用同一loadPrismSpectrumPalette函数三条路径均可行且所有选项可自由覆盖。如需了解同目录其他光学/氛围类调色板的差异如atmosphere、space等分类可以对照 palettes/ 目录下各调色板的src/options.ts横向比较颜色组与blendMode的选择调色板整体目录结构遵循统一的 monorepo 规范package.jsonrollup.config.js 多 tsconfig 构建矩阵由共享 CLIcli/ 中的构建命令统一产出。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考