企业官网建设流程全解析

tsParticles RustAndCorrosion 调色板实战指南：为粒子特效注入锈蚀与腐化的工业质感

【免费下载链接】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-rust-and-corrosion调色板展开的专项使用指南。该调色板位于仓库 palettes/earth/rustAndCorrosion 目录，属于 tsParticles「地球（earth）」主题下的调色板系列，与 caustics、desertSand、mudAndDirt、oilSlick、rockAndGravel、skinAndOrganic 等并列。读完本文，你将掌握该调色板的色板构成、底层注册机制，以及如何在 CDN / Vanilla JS / jQuery 和各类框架组件中加载使用，为网站背景打造锈迹斑斑的工业风粒子效果。

上图展示了 RustAndCorrosion 调色板的实际渲染效果（1920×1080 示例图，位于 images/sample.png）。

RustAndCorrosion 调色板是什么

RustAndCorrosion 是 tsParticles 官方提供的一款「颜色调色板（Palette）」。与预设（Preset）不同，调色板只定义颜色，不定义粒子的完整行为——粒子数量、形状、运动方式等仍需要由你通过粒子配置（particles options）来指定，或者与@tsparticles/basic之类的运行时包配合使用。正如官方文档所述：

A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

这一设计让调色板可以灵活叠加到任意粒子配置之上：你既可以基于basic包快速看到效果，也可以在自有的完整配置里仅借用它来统一着色。

色板构成与颜色一览

RustAndCorrosion 的官方 README 给出了完整的色板定义，这里完整继承如下：

附加属性：

• Blend mode（混合模式）：source-over
• Fill（填充）：true

这一组色值呈现出从深褐到橙黄的渐变，模拟金属氧化、锈蚀与腐化的视觉效果，非常适合工业风、蒸汽朋克、末日废土或复古机械类网站背景。

从源码可以精确印证上述定义。调色板的完整配置位于 palettes/earth/rustAndCorrosion/src/options.ts，内容如下：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Rust & Corrosion", background: "#100800", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#1A0800", "#441400", "#883300", "#AA4400", "#CC6622", "#EE8833", "#DDAA66", ], }, }, };

注意源码中的注册名是rust-and-corrosion（见 src/index.ts），而使用时的palette选项值为"rustAndCorrosion"——README 示例中即采用驼峰写法，两者通过 tsParticles 内部机制对应，实际以选项中的字符串为准。

调色板的底层工作原理

RustAndCorrosion 不是硬编码在粒子配置里的写死色值，而是以「插件注册」的方式挂载到引擎。从源码看，加载函数只有十几行：

// palettes/earth/rustAndCorrosion/src/index.ts import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "rust-and-corrosion"; export async function loadRustAndCorrosionPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

关键调用链如下：

1. loadRustAndCorrosionPalette(engine)调用engine.pluginManager.register(...)注册插件；
2. 插件注册后通过pluginManager.addPalette(name, options)把色板存入引擎的palettes映射表（Map<string, IPalette>，见 engine/src/Core/Utils/PluginManager.ts）；
3. 当你在 options 中写入palette: "rustAndCorrosion"时，引擎在加载配置时会通过getPalette(name)查表，并自动完成两件事（见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts）：
   • 将调色板的background写入画布背景；
   • 将调色板的blendMode应用于粒子绘制；
   • 将调色板的colors转换为粒子的paint配置（fill/stroke 颜色及其透明度），作为粒子着色的默认值。

因此，只要注册了调色板并在 options 中指定palette字段，你甚至无需再手动编写particles.color等颜色相关配置，粒子会自动从调色板取色。

IPalette接口的完整字段定义位于 engine/src/Core/Interfaces/IPalette.ts，包括：

• background: string—— 背景色；
• blendMode: GlobalCompositeOperation—— 画布混合模式；
• colors: SingleOrMultiple<IPaletteColors>—— 支持一组或多组颜色，每组可含fill（填充色，含enable、opacity、value）与stroke（描边色，含opacity、value、width）；
• name: string—— 调色板名称。

这也说明调色板体系是通用机制：其他官方调色板（如 earth 目录下的 caustics、oilSlick 等）均遵循同一接口与注册流程。

快速检查清单

官方文档给出三步上手流程，本文完整保留并补充细节：

1. 安装引擎：安装@tsparticles/engine（或直接使用下方的 CDN bundle）；
2. 加载基础包并注册调色板：加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadRustAndCorrosionPalette；
3. 应用调色板与最小粒子配置：在 options 中写入palette: "rustAndCorrosion"，并配合粒子数量、形状、尺寸、运动等最小配置。

再次强调：调色板只负责颜色，完整的粒子行为需要运行时包与粒子配置共同提供。

安装与使用

方式一：CDN / Vanilla JS / jQuery

在 HTML 中依次引入基础包与调色板脚本：

<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-rustAndCorrosion@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

注意：调色板脚本的 URL 文件名沿用了历史命名（tsparticles.palette-coloredSmokeAmber.min.js），与 npm 包名@tsparticles/palette-rust-and-corrosion不完全一致，引用时请以官方发布的 CDN 文件名为准。

脚本加载完成后，即可初始化tsParticles：

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

上述配置的含义：

• loadBasic(engine)加载基础粒子运行时（圆形等基础形状、基础运动能力）；
• loadRustAndCorrosionPalette(engine)注册色板；
• particles.number.value: 200—— 同时存在 200 个粒子；
• particles.shape.type: "circle"—— 粒子形状为圆形；
• particles.size.value: { min: 10, max: 15 }—— 粒子尺寸在 10～15 之间随机；
• particles.move.enable: true, speed: 2—— 粒子以速度 2 运动；
• palette: "rustAndCorrosion"—— 应用色板，粒子自动按上述 7 色填充，背景自动设为#100800，混合模式为source-over。

方式二：npm 包安装（模块化项目）

若使用打包工具（Vite / Webpack / Rollup 等），可安装引擎与调色板包：

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-rust-and-corrosion

包名、版本与导出结构可参考 palettes/earth/rustAndCorrosion/package.json：当前仓库内版本为4.3.3，同时提供 ESM（import）、CJS（require）、UMD 与浏览器构建，并额外暴露./lazy子路径用于按需加载。构建脚本统一通过@tsparticles/cli-command-build的tsparticles-build执行，打包配置见 rollup.config.js。

模块化项目中的等价写法：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadRustAndCorrosionPalette } from "@tsparticles/palette-rust-and-corrosion"; (async () => { await loadBasic(tsParticles); await loadRustAndCorrosionPalette(tsParticles); await tsParticles.load({ id: "tsparticles", options: { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: "rustAndCorrosion", }, }); })();

若希望减小首屏加载体积，也可以使用 src/index.lazy.ts 暴露的懒加载入口（@tsparticles/palette-rust-and-corrosion/lazy），它会在插件注册时才动态import("./options.js")载入色板数据。

自定义与覆盖

重要提示 ⚠️：调色板提供的是默认颜色，你依然可以在 options 中像标准 tsParticles 安装那样覆盖任意属性。例如：

const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, color: { value: "#AA4400" }, // 手动覆盖，仅使用铁锈橙 }, background: { color: "#000000" }, // 覆盖调色板背景 palette: "rustAndCorrosion", };

这样便能在保留调色板整体氛围的同时，针对个别场景（如品牌色、深色背景适配）做精细化调整。

方式三：带 tsParticles 组件库的框架

React、Vue（2.x / 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等官方组件库（位于仓库 wrappers 目录）均支持在组件初始化前调用loadRustAndCorrosionPalette函数。具体调用方式请查阅对应组件库文档：先加载组件库并安装其依赖的 tsParticles 包，再在组件挂载前注册该调色板，最后在组件配置中传入包含palette: "rustAndCorrosion"的 options 即可。

从源码验证：浏览器全局变量

对于 CDN 场景，src/browser.ts 会把loadRustAndCorrosionPalette挂载到globalThis（window 对象），因此前面示例中才能在浏览器全局作用域直接调用该函数：

globalObject.loadRustAndCorrosionPalette = loadRustAndCorrosionPalette;

小结

RustAndCorrosion 调色板通过 tsParticles 的插件注册机制，将「锈蚀橙」色系、暖黑背景与source-over混合模式一键应用到粒子特效中。使用它的完整链路是：安装引擎与基础包 → 注册loadRustAndCorrosionPalette→ 在 options 中设置palette: "rustAndCorrosion"并补充粒子配置。它只负责颜色，不限制行为，因此可以无缝嵌入任何粒子配置或框架组件中。相关的官方调色板目录可进一步参考 palettes 根目录，其中 earth 下还有多款同主题调色板可供组合探索。

【免费下载链接】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