tsParticles Greens 调色板Monochromatic Greens使用指南与源码解析【免费下载链接】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 Greens 是 tsParticles 提供的单色绿色调色板Monochrome Greens Palette它通过palette: greens一行配置就能为粒子效果注入一套从深绿到浅绿的协调配色配合screen混合模式营造出类似彩色烟雾的发光效果。本文基于仓库中 greens/README.md 文档结合引擎的 Palette 插件机制与源码实现讲解它的安装方式、使用步骤、配置细节与底层工作原理。Palette 是什么为什么需要它在 tsParticles 中Palette调色板只定义颜色不定义粒子的完整行为。它是一组预设的配色方案包含背景色、混合模式blend mode以及粒子填充/描边颜色集合正如文档 Quick checklist 中所强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.因此使用调色板通常需要三步安装tsparticles/engine或直接使用 CDN 包加载一个运行时基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadGreensPalette在选项中应用调色板名称palette: greens并配合一份最简粒子配置。调色板与预设Preset不同预设如presets/fireworks等提供的是整套可直接运行的配置而调色板只负责色彩体系粒子数量、形状、尺寸、运动等仍需你自行配置。这与引擎中Options.#importPalette与ParticlesOptions.#importPalette的实现完全一致见下文源码解析。安装与加载npm 方式Greens 调色板以独立 npm 包发布tsparticles/palette-monochrome-greens见 palettes/monochromatic/greens/package.json 中的name字段当前仓库版本为 4.3.3。包内同时提供 ESM / CJS / UMD / Browser 多模块格式与类型声明。npm install tsparticles/engine tsparticles/basic tsparticles/palette-monochrome-greens在模块化项目中导入并注册import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadGreensPalette } from tsparticles/palette-monochrome-greens; await loadBasic(tsParticles); await loadGreensPalette(tsParticles);从 index.lazy.ts 可以看到loadGreensPalette的 lazy 入口在注册时才动态import(./options.js)加载调色板数据适合按需加载场景index.ts 则是同步加载的非 lazy 入口内部注册名为monochrome-greens。CDN / Vanilla JS / jQuery 方式原文档给出的 CDN 方式注意第二个脚本是含调色板数据的 bundle 文件script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-greens4/tsparticles.palette-coloredSmokeAmber.min.js/script快速上手最小可用示例加载脚本后即可像下面这样初始化沿用文档中的核心示例并补齐缺失的loadBasic步骤(async engine { await loadBasic(engine); await loadGreensPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: greens, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);关键点说明palette: greens是注册到引擎 PluginManager 中的名称。lazy 入口将其注册为greens见 index.lazy.ts 中const paletteName greens。加载调色板必须在tsParticles.load(...)之前完成——这与引擎 PluginManager.ts 中register方法的限制一致插件注册只能发生在load()之前#initialized之前否则会抛出 Register plugins can only be done before calling tsParticles.load()。配置项number.value、shape.type、size.value、move等均来自你加载的运行时包如tsparticles/basic调色板本身不包含这些行为配置。Customization可完全覆盖文档特别强调调色板引入的选项与标准 tsParticles 配置一样所有属性都可以被你的显式配置覆盖。例如你可以覆盖background、particles下的任意字段const options { background: { color: #000000 }, // 覆盖调色板自带背景色 #001400 particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 5, max: 12 } }, move: { enable: true, speed: 1.5 }, }, palette: greens, };覆盖顺序由引擎配置加载机制保证调色板导入发生在data.palette解析时见下文你显式提供的字段会在此基础上覆盖或补充。使用带 tsParticles 组件库的框架如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等 tsParticles 组件库则查阅对应组件库文档在初始化前调用loadGreensPalette函数即可用法与上面一致。Greens 调色板的完整配色原文档以表格形式完整列出了 Greens 调色板的所有颜色。其中包含粒子填充色系含多档绿色、背景色、以及中性/辅助色黑、白、灰及一个深蓝#1D3557并标注了 Blend mode 为source-over、Fill 为true。注意README 表格中标注的 Blend modesource-over与仓库实际源码 options.ts 中定义的blendMode: screen不一致实际运行时以源码为准源码中还额外定义了background: #001400。这也提醒我们调色板的真实效果应以包内 options 源码为准README 表格可能滞后于实现。粒子填充色源码中的 6 档绿色色值描述#0A3A0A深绿#1A6B1A中深绿#2EA82E中绿#55CC55亮绿#88E888高亮绿#C0F5C0浅绿接近白背景与辅助色README 表格所列类别色值背景色#1A1000表格标注/ 源码实际#001400中性色#000000、#FFFFFF、#F5F5F5、#1E1E1E、#252525、#E0E0E0、#A0A0A0、#404040暖调点缀#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500、#FFEFD7、#090500冷色点缀#1D3557README 表格同时给出了 Blend modesource-over与 Filltrue两项元信息。如果你希望粒子呈现发光叠加的烟雾感可在选项里显式配置blend.mode。源码解析Greens 调色板的数据结构调色板本质是一个符合引擎IPalette接口的对象。查看 engine/src/Core/Interfaces/IPalette.ts 可以了解其完整结构字段类型说明namestring调色板名称backgroundstring背景色blendModeGlobalCompositeOperationCanvas 混合模式colorsSingleOrMultipleIPaletteColors一组或多组颜色集合colors.fill{ enable, value, opacity? }填充色是否启用、色值可单个或多个、可选透明度范围colors.stroke{ value, opacity?, width }描边色色值、可选透明度、描边宽度范围Greens 调色板实际导出的数据见 palettes/monochromatic/greens/src/options.tsexport const options: IPalette { name: Monochrome Greens, background: #001400, blendMode: screen, colors: { fill: { enable: true, value: [ #0A3A0A, #1A6B1A, #2EA82E, #55CC55, #88E888, #C0F5C0, ], }, }, };可见该调色板使用screen滤色混合模式背景为近黑的深绿#001400粒子填充色为 6 档绿色渐变。由于启用了screen模式粒子重叠处颜色会变亮从而产生类似彩色烟雾/发光的视觉效果——这正是 README 首行所描述的 colored smoke 效果。引擎如何应用 Palette底层实现原理当你在选项中写下palette: greens时引擎内部经历了以下过程见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts注册loadGreensPalette(engine)调用engine.pluginManager.register(...)通过 PluginManager.addPalette 将greens → options存入palettes映射表。顶层导入Options.doLoad检测到data.palette后调用#importPalette通过pluginManager.getPalette(greens)取出数据然后以options.load(...)方式注入背景色与 blend 配置this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });粒子级导入ParticlesOptions.doLoad检测到data.palette此时是particles.palette后再次#importPalette将调色板的colors.fill可选colors.stroke转换为引擎内部的paint配置包含color.value、enable、opacity与 blend 配置从而让每个粒子从调色板的颜色集合中取值渲染。查询接口PluginManager.getPalette(name)提供了按名取回调色板的统一入口见 PluginManager.ts。从源码结构看Palette 机制是在引擎核心engine中实现的通用能力greens 只是众多已发布调色板之一仓库的palettes/目录下还包含 atmosphere、confetti、fireworks、nature、space、water 等大量同构调色板例如palettes/monochromatic/家族它们都遵循完全相同的IPalette数据格式与加载流程。engine 核心同时提供plugins/colorshex、hsl、rgb、oklab 等颜色解析插件来支持各种颜色格式的解析。效果预览与实测仓库中提供了该调色板的示例截图 palettes/monochromatic/greens/images/sample.png。从截图可见背景为接近纯黑的深色粒子为绿色系的单色渐变从亮绿到接近白色大小不一、随机分布并带有自然动态感——这与源码screen混合模式 6 档绿色填充色的设定吻合可作为你配置后的效果参照。常见问题Q1为什么设置了palette后粒子没有颜色变化确认你是否在load()之前调用了loadGreensPalette(engine)并且加载的运行时包如tsparticles/basic确实存在。同时注意调色板只定义颜色number、shape、move等行为仍需自行配置。Q2CDN 脚本加载后如何调用CDN bundle 会向全局暴露loadMonochromeGreensPalette见 browser.ts 中的挂载逻辑同时 browser.ts 也会把__tsParticlesInternals挂到globalThis上。若你使用tsparticles/palette-greens的 CDN bundle请以该包实际暴露的全局函数名为准调用。Q3如何让粒子边缘发光、呈现烟雾感Greens 调色板已自带screen混合模式如需更强发光效果可配合blend相关选项、paint配置或粒子透明度做叠加调整。Q4可以自定义颜色吗可以。调色板只是默认配色你可以在 options 中显式覆盖background、blend、paint、particles等任意字段文档 Customization 部分强调所有属性均可覆盖。相关资源更多 Presets 与 Palettes 目录palettes/monochromatic 家族位于 palettes/monochromatic颜色解析插件plugins/colors含 hex、hsl、hsv、hwb、lab、lch、named、oklab、oklch、rgb引擎核心 Palette 机制engine/src/Core/Interfaces/IPalette.ts、engine/src/Core/Utils/PluginManager.ts选项加载入口engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts /DSMLparameter /DSMLinvoke【免费下载链接】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 Greens 调色板（Monochromatic Greens）使用指南与源码解析
tsParticles Greens 调色板Monochromatic Greens使用指南与源码解析【免费下载链接】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 Greens 是 tsParticles 提供的单色绿色调色板Monochrome Greens Palette它通过palette: greens一行配置就能为粒子效果注入一套从深绿到浅绿的协调配色配合screen混合模式营造出类似彩色烟雾的发光效果。本文基于仓库中 greens/README.md 文档结合引擎的 Palette 插件机制与源码实现讲解它的安装方式、使用步骤、配置细节与底层工作原理。Palette 是什么为什么需要它在 tsParticles 中Palette调色板只定义颜色不定义粒子的完整行为。它是一组预设的配色方案包含背景色、混合模式blend mode以及粒子填充/描边颜色集合正如文档 Quick checklist 中所强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.因此使用调色板通常需要三步安装tsparticles/engine或直接使用 CDN 包加载一个运行时基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadGreensPalette在选项中应用调色板名称palette: greens并配合一份最简粒子配置。调色板与预设Preset不同预设如presets/fireworks等提供的是整套可直接运行的配置而调色板只负责色彩体系粒子数量、形状、尺寸、运动等仍需你自行配置。这与引擎中Options.#importPalette与ParticlesOptions.#importPalette的实现完全一致见下文源码解析。安装与加载npm 方式Greens 调色板以独立 npm 包发布tsparticles/palette-monochrome-greens见 palettes/monochromatic/greens/package.json 中的name字段当前仓库版本为 4.3.3。包内同时提供 ESM / CJS / UMD / Browser 多模块格式与类型声明。npm install tsparticles/engine tsparticles/basic tsparticles/palette-monochrome-greens在模块化项目中导入并注册import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadGreensPalette } from tsparticles/palette-monochrome-greens; await loadBasic(tsParticles); await loadGreensPalette(tsParticles);从 index.lazy.ts 可以看到loadGreensPalette的 lazy 入口在注册时才动态import(./options.js)加载调色板数据适合按需加载场景index.ts 则是同步加载的非 lazy 入口内部注册名为monochrome-greens。CDN / Vanilla JS / jQuery 方式原文档给出的 CDN 方式注意第二个脚本是含调色板数据的 bundle 文件script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-greens4/tsparticles.palette-coloredSmokeAmber.min.js/script快速上手最小可用示例加载脚本后即可像下面这样初始化沿用文档中的核心示例并补齐缺失的loadBasic步骤(async engine { await loadBasic(engine); await loadGreensPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: greens, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);关键点说明palette: greens是注册到引擎 PluginManager 中的名称。lazy 入口将其注册为greens见 index.lazy.ts 中const paletteName greens。加载调色板必须在tsParticles.load(...)之前完成——这与引擎 PluginManager.ts 中register方法的限制一致插件注册只能发生在load()之前#initialized之前否则会抛出 Register plugins can only be done before calling tsParticles.load()。配置项number.value、shape.type、size.value、move等均来自你加载的运行时包如tsparticles/basic调色板本身不包含这些行为配置。Customization可完全覆盖文档特别强调调色板引入的选项与标准 tsParticles 配置一样所有属性都可以被你的显式配置覆盖。例如你可以覆盖background、particles下的任意字段const options { background: { color: #000000 }, // 覆盖调色板自带背景色 #001400 particles: { number: { value: 300 }, shape: { type: circle }, size: { value: { min: 5, max: 12 } }, move: { enable: true, speed: 1.5 }, }, palette: greens, };覆盖顺序由引擎配置加载机制保证调色板导入发生在data.palette解析时见下文你显式提供的字段会在此基础上覆盖或补充。使用带 tsParticles 组件库的框架如果你在使用 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等 tsParticles 组件库则查阅对应组件库文档在初始化前调用loadGreensPalette函数即可用法与上面一致。Greens 调色板的完整配色原文档以表格形式完整列出了 Greens 调色板的所有颜色。其中包含粒子填充色系含多档绿色、背景色、以及中性/辅助色黑、白、灰及一个深蓝#1D3557并标注了 Blend mode 为source-over、Fill 为true。注意README 表格中标注的 Blend modesource-over与仓库实际源码 options.ts 中定义的blendMode: screen不一致实际运行时以源码为准源码中还额外定义了background: #001400。这也提醒我们调色板的真实效果应以包内 options 源码为准README 表格可能滞后于实现。粒子填充色源码中的 6 档绿色色值描述#0A3A0A深绿#1A6B1A中深绿#2EA82E中绿#55CC55亮绿#88E888高亮绿#C0F5C0浅绿接近白背景与辅助色README 表格所列类别色值背景色#1A1000表格标注/ 源码实际#001400中性色#000000、#FFFFFF、#F5F5F5、#1E1E1E、#252525、#E0E0E0、#A0A0A0、#404040暖调点缀#1A1000、#3A2200、#6B3D00、#A65A00、#D98A1A、#FFC266、#FFA500、#FFEFD7、#090500冷色点缀#1D3557README 表格同时给出了 Blend modesource-over与 Filltrue两项元信息。如果你希望粒子呈现发光叠加的烟雾感可在选项里显式配置blend.mode。源码解析Greens 调色板的数据结构调色板本质是一个符合引擎IPalette接口的对象。查看 engine/src/Core/Interfaces/IPalette.ts 可以了解其完整结构字段类型说明namestring调色板名称backgroundstring背景色blendModeGlobalCompositeOperationCanvas 混合模式colorsSingleOrMultipleIPaletteColors一组或多组颜色集合colors.fill{ enable, value, opacity? }填充色是否启用、色值可单个或多个、可选透明度范围colors.stroke{ value, opacity?, width }描边色色值、可选透明度、描边宽度范围Greens 调色板实际导出的数据见 palettes/monochromatic/greens/src/options.tsexport const options: IPalette { name: Monochrome Greens, background: #001400, blendMode: screen, colors: { fill: { enable: true, value: [ #0A3A0A, #1A6B1A, #2EA82E, #55CC55, #88E888, #C0F5C0, ], }, }, };可见该调色板使用screen滤色混合模式背景为近黑的深绿#001400粒子填充色为 6 档绿色渐变。由于启用了screen模式粒子重叠处颜色会变亮从而产生类似彩色烟雾/发光的视觉效果——这正是 README 首行所描述的 colored smoke 效果。引擎如何应用 Palette底层实现原理当你在选项中写下palette: greens时引擎内部经历了以下过程见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts注册loadGreensPalette(engine)调用engine.pluginManager.register(...)通过 PluginManager.addPalette 将greens → options存入palettes映射表。顶层导入Options.doLoad检测到data.palette后调用#importPalette通过pluginManager.getPalette(greens)取出数据然后以options.load(...)方式注入背景色与 blend 配置this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, });粒子级导入ParticlesOptions.doLoad检测到data.palette此时是particles.palette后再次#importPalette将调色板的colors.fill可选colors.stroke转换为引擎内部的paint配置包含color.value、enable、opacity与 blend 配置从而让每个粒子从调色板的颜色集合中取值渲染。查询接口PluginManager.getPalette(name)提供了按名取回调色板的统一入口见 PluginManager.ts。从源码结构看Palette 机制是在引擎核心engine中实现的通用能力greens 只是众多已发布调色板之一仓库的palettes/目录下还包含 atmosphere、confetti、fireworks、nature、space、water 等大量同构调色板例如palettes/monochromatic/家族它们都遵循完全相同的IPalette数据格式与加载流程。engine 核心同时提供plugins/colorshex、hsl、rgb、oklab 等颜色解析插件来支持各种颜色格式的解析。效果预览与实测仓库中提供了该调色板的示例截图 palettes/monochromatic/greens/images/sample.png。从截图可见背景为接近纯黑的深色粒子为绿色系的单色渐变从亮绿到接近白色大小不一、随机分布并带有自然动态感——这与源码screen混合模式 6 档绿色填充色的设定吻合可作为你配置后的效果参照。常见问题Q1为什么设置了palette后粒子没有颜色变化确认你是否在load()之前调用了loadGreensPalette(engine)并且加载的运行时包如tsparticles/basic确实存在。同时注意调色板只定义颜色number、shape、move等行为仍需自行配置。Q2CDN 脚本加载后如何调用CDN bundle 会向全局暴露loadMonochromeGreensPalette见 browser.ts 中的挂载逻辑同时 browser.ts 也会把__tsParticlesInternals挂到globalThis上。若你使用tsparticles/palette-greens的 CDN bundle请以该包实际暴露的全局函数名为准调用。Q3如何让粒子边缘发光、呈现烟雾感Greens 调色板已自带screen混合模式如需更强发光效果可配合blend相关选项、paint配置或粒子透明度做叠加调整。Q4可以自定义颜色吗可以。调色板只是默认配色你可以在 options 中显式覆盖background、blend、paint、particles等任意字段文档 Customization 部分强调所有属性均可覆盖。相关资源更多 Presets 与 Palettes 目录palettes/monochromatic 家族位于 palettes/monochromatic颜色解析插件plugins/colors含 hex、hsl、hsv、hwb、lab、lch、named、oklab、oklch、rgb引擎核心 Palette 机制engine/src/Core/Interfaces/IPalette.ts、engine/src/Core/Utils/PluginManager.ts选项加载入口engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts /DSMLparameter /DSMLinvoke【免费下载链接】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），仅供参考
 时间 O(1) 空间的动态规划优化（LeetCode 题解）)
