tsParticles FogCoastal 调色板使用指南：用五色雾霭粒子渲染海岸氛围背景

tsParticles FogCoastal 调色板使用指南用五色雾霭粒子渲染海岸氛围背景【免费下载链接】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/tsparticlesFogCoastal雾霭海岸是 tsParticles 官方water系列调色板之一以深色夜空为底色、五级冷灰蓝渐变模拟海雾中弥散的光粒子。本文将以 palettes/water/fogCoastal/README.md 为主线完整覆盖其颜色定义、CDN 与模块化安装方式、最小可用配置并结合引擎源码剖析调色板Palette这一插件机制从注册到生效的完整链路帮助你在 React、Vue、Angular、jQuery 等任意前端技术栈中快速落地一套海岸雾霭风格的粒子背景。调色板是什么只定义颜色不定义行为tsParticles 的调色板Palette是一套纯颜色方案它不包含粒子数量、形状、运动速度等行为配置。正如官方 README 中强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.因此使用 FogCoastal 的正确姿势是三步走安装运行时引擎 → 加载基础包并注册调色板 → 在选项中通过palette字段引用它并自行搭配一份最小粒子配置。颜色一览五级冷灰蓝渐变 深海背景FogCoastal 由 5 个渐变级色的 fill 色与 1 个背景色构成全部定义在 palettes/water/fogCoastal/src/options.ts 中用途色值视觉印象粒子填充 1#99AABB蓝灰铁灰雾中最深的一层粒子填充 2#AABBCC经典雾蓝粒子填充 3#BBCCDD浅雾灰蓝粒子填充 4#CCDDE0近白的淡蓝粒子填充 5#DDE8EE接近白光的雾顶色背景#0d1014极深的海夜黑衬托光雾粒子混合模式source-over默认正常混合粒子叠加填充开关true粒子以填充色渲染对应到源码options.ts中的定义非常直观export const options: IPalette { name: Fog - Coastal, background: #0d1014, blendMode: source-over, colors: { fill: { enable: true, value: [#99AABB, #AABBCC, #BBCCDD, #CCDDE0, #DDE8EE], }, }, };这 5 个色值恰好是#99AABB → #DDE8EE的阶梯式提亮模拟雾气由近及远、由浓转淡的纵深层次是海岸清晨薄雾场景的理想底色方案。快速上手三步启用 FogCoastal官方 README 给出的快速清单只有三步安装tsparticles/engine或直接引入下方 CDN bundle加载一个基础运行时包例如tsparticles/basic并在tsParticles.load(...)之前调用loadFogCoastalPalette(engine)注册调色板在 options 中同时写入palette: fogCoastal与一份最小粒子配置。第三步中的palette字段可写在两个层级顶层 options 或particles对象内二者行为略有差异详见下文源码解析一节。CDN / Vanilla JS / jQuery 用法不构建工程、直接用script标签是最快的体验方式。README 给出了完整的 HTML 接入方案script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-fogCoastal4/tsparticles.palette-fogCoastal.min.js/script说明bundle 文件名遵循tsparticles/palette-*各包的 jsDelivr 发布产物命名具体以 npm 包 package.jsontsparticles/palette-fog-coastal当前仓库内版本 4.3.3在 CDN 上的实际文件名为准。基础运行时包与调色板包缺一不可。脚本加载完成后调色板加载函数会以全局变量的形式暴露这是 browser.ts 在构建时注入全局loadFogCoastalPalette的结果。随后即可初始化引擎(async engine { await loadBasic(engine); await loadFogCoastalPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: fogCoastal, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这是一份可直接复制运行的最小示例200 个圆形粒子、1015 的随机尺寸、每秒 2 像素的匀速飘移搭配 FogCoastal 的冷灰蓝填充与#0d1014背景即可得到典型的雾中光点效果。调整number、size、speed即可在完全相同的配色下切换出细雨、薄雾或星光等不同氛围。关于 palette 名称的一个细节从源码看注册时使用的键名是fog-coastal见 index.ts 中的const paletteName fog-coastal而 README 示例中写的是fogCoastal。若palette名称在运行时解析失败引擎会静默跳过调色板导入见下文#importPalette的守卫逻辑粒子将以默认颜色渲染——排查此类问题时建议先确认选项中palette的值与注册名完全一致。源码解析调色板从注册到生效的完整链路理解 FogCoastal 的内部机制能帮你更准确地判断调色板与行为配置的边界。整个链路分为注册与解析两段。1. 注册loadFogCoastalPalette做了什么核心入口是 index.ts 中的loadFogCoastalPaletteexport async function loadFogCoastalPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它通过engine.pluginManager.register(...)注册一个延迟执行的 loaderloader 内部再调用addPalette(fog-coastal, options)把调色板对象存入插件管理器的palettesMap见 engine/src/Core/Utils/PluginManager.ts。此外仓库还提供懒加载入口 index.lazy.ts它会动态import(./options.js)适合按需加载的打包场景。IPalette接口在引擎中定义于 engine/src/Core/Interfaces/IPalette.ts包含四个字段background: string—— 画布背景色blendMode: GlobalCompositeOperation—— 画布混合模式colors—— 填充fill含enable、可选opacity范围与value色值和描边stroke含width配置支持单个或数组name: string—— 调色板名称。2. 解析palette选项如何被消费当 options 顶层出现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 }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, }); }可以看到顶层palette会一次性注入三样东西背景色#0d1014、混合模式source-over以及particles.palette。而particles.palette由 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette继续处理把调色板的 fill 色值映射为粒子的paint填充含opacity、width等并同样把blendMode落到画布混合上。这意味着 FogCoastal 的 5 个色值会进入粒子的 paint 颜色池粒子渲染时按该色池取色。因此建议只在顶层或particles层级二选一声明palette避免重复导入若想保留调色板配色但替换背景可只在particles层级声明palette并自行覆盖background。自定义所有选项都可覆盖调色板只负责提供默认配色它不会锁定任何其他配置。README 明确提示You can override all the options defining the properties like in any standardtsParticlesinstallation.也就是说加载 FogCoastal 之后你依然可以像写普通 tsParticles 配置一样自由覆盖改size让粒子更细腻、改move让雾气更湍急、把shape换成star或image、叠加interactivity鼠标交互如 repulse、bubble甚至通过particles.color直接覆盖调色板色池。调色板与完整行为配置的组合方式与任意 tsParticles 项目的标准写法完全一致。框架组件用法对于 React、Vue 2/3、Angular、Svelte、Preact、Solid、jQuery、Web Components 等已封装 tsParticles 组件库的框架接入方式同样简单在组件初始化前调用对应组件库文档中暴露的loadFogCoastalPalette(engine)函数完成注册然后在 options 中声明palette即可无需手写script或手动tsParticles.load。仓库中的 wrappers 目录存放了各框架封装包的源码可参考其接入模式。延伸阅读调色板定义源码palettes/water/fogCoastal/src/options.ts加载函数与懒加载变体index.ts、index.lazy.ts、browser.ts包元数据与发布配置palettes/water/fogCoastal/package.jsonIPalette接口定义engine/src/Core/Interfaces/IPalette.ts插件管理器与调色板注册engine/src/Core/Utils/PluginManager.ts顶层 palette 导入逻辑engine/src/Options/Classes/Options.tsparticles 层级 palette 导入逻辑engine/src/Options/Classes/Particles/ParticlesOptions.ts同系列水主题调色板palettes/waterdeepOcean、foamAndBubbles、lagoon、rain、splash 等【免费下载链接】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），仅供参考