tsParticles Pizza 调色板用 tsparticles/palette-pizza 打造披萨主题暖色系粒子背景【免费下载链接】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 官方仓库中的 Pizza Palettetsparticles/palette-pizza为主线讲解调色板包的安装、加载与自定义方法并结合引擎源码剖析调色板在tsParticles内部的工作原理。读完本文你将掌握如何在 CDN 或模块化项目中通过loadPizzaPalette快速启用一套披萨主题的暖色粒子配色并理解调色板与完整粒子行为配置之间的关系。Pizza Palette 是什么tsparticles/palette-pizza是 tsParticles 官方 Palettes 系列中属于食物主题food分支的一个调色板包位于仓库 palettes/food/pizza 目录下。它本身不包含任何粒子行为逻辑只负责提供一套以披萨食材为灵感的颜色方案——从披萨饼底、芝士、番茄酱、香肠到青椒与饼边焦色一应俱全。这一点在引擎的类型定义中有明确体现。调色板的核心接口 engine/src/Core/Interfaces/IPalette.ts 只包含四个字段字段类型含义namestring调色板名称backgroundstring背景色blendModeGlobalCompositeOperationCanvas 混合模式colorsSingleOrMultipleIPaletteColors一组或多组填充/描边颜色配置IPaletteColors又分为fill填充色含enable、opacity、value与stroke描边色含opacity、value、width两部分。也就是说调色板定义的是颜色而不是行为——实际粒子数量、形状、运动轨迹等仍需你在配置中自行指定这正是官方 README 反复强调的要点。调色板源码解析Pizza 调色板的实际颜色数据定义在 palettes/food/pizza/src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pizza, background: #1b1207, blendMode: multiply, colors: { fill: { enable: true, value: [ #F4D6A0, #E0B06F, #C6863D, #D84315, #B71C1C, #FFD54F, #3A3A3A, #2E7D32, ], }, }, };可以看到该调色板定义了一个含 8 个颜色的填充色列表粒子在绘制时会从这些颜色中取色#F4D6A0/#E0B06F/#C6863D芝士、饼底等暖棕色调#D84315/#B71C1C番茄酱、香肠等红橙色系#FFD54F芝士黄#3A3A3A深灰模拟烤焦的饼边#2E7D32青椒等绿色点缀背景色为#1b1207接近深棕的暖黑混合模式采用multiply。需要说明的是README 中的色板表格与源码存在细微出入表格展示的是完整参考色卡包含#1A1000背景、#FFFFFF白、#1D3557蓝等辅助/中性色而options.ts才是运行时实际注入粒子系统的 8 色填充列表与真实背景色。使用时以源码为准。调色板注册逻辑在 palettes/food/pizza/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pizza; export async function loadPizzaPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }函数将调色板以pizza为键名注册进引擎的插件管理器addPalette的实现见 engine/src/Core/Utils/PluginManager.ts本质是把name - IPalette存入内部Map此后配置中写palette: pizza即可引用它。快速上手官方 README 给出了三步快速清单安装tsparticles/engine或直接使用下方的 CDN bundle加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前调用loadPizzaPalette在配置中同时提供调色板名称与一份最小化的粒子配置。因为调色板只定义颜色必须与运行时包和粒子选项搭配使用。CDN / Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-pizza4/tsparticles.palette-coloredSmokeAmber.min.js/script注意第二行脚本的文件名沿用了调色板系列统一的tsparticles.palette-coloredSmokeAmber.min.js命名各调色板包共用同一文件名模板但加载的确实是palette-pizza的 bundle。模块化安装npm 安装包名为tsparticles/palette-pizza见 palettes/food/pizza/package.json依赖tsparticles/engine支持import/require/ UMD 多种入口并额外导出了./lazy子路径用于按需加载npm install tsparticles/palette-pizza tsparticles/basic最小可用配置(async engine { await loadBasic(engine); await loadPizzaPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pizza, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点拆解loadBasic(engine)先加载基础运行时使粒子具备数量、形状、大小、移动等基本能力loadPizzaPalette(engine)注册调色板必须在engine.load(...)之前完成配置中palette: pizza与注册时的键名pizza严格对应粒子配置数量 200、圆形、大小 10–15、速度 2由你自行决定调色板只接管配色。自定义与覆盖与任何标准tsParticles安装一样你可以通过显式定义属性来覆盖调色板带来的所有默认值官方在 README 中以 ⚠️ 提醒了这一点。例如先引用palette: pizza获取默认配色再手动覆盖particles.paint、particles.blend、背景色等字段实现披萨底色 自定义细节的效果。框架集成在 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有官方 tsParticles 组件库的框架中使用方式一致安装tsparticles/palette-pizza后在组件初始化引擎时调用loadPizzaPalette(engine)即可具体接入方式以对应组件库文档为准。工作原理调色板如何注入粒子系统当配置中出现palette字段时引擎会在两个层面消费它。选项级背景与混合在 engine/src/Options/Classes/Options.ts 中#importPalette会根据调色板名从插件管理器取出数据把background应用到画布背景、把blendMode应用到混合模式。Pizza 调色板因此会把默认背景设为深棕#1b1207。粒子级颜色与绘制更关键的是 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette方法。其工作流程为从PluginManager取出调色板数据将colors规范化为数组支持多组颜色变体把调色板的fill.value8 个披萨色转换为paint.fill.color.valuefill.enable映射到paint.fill.enablefill.opacity若存在则一并映射若调色板定义了stroke则同步生成带width的描边绘制项最后通过this.load({ paint, blend: { enable: true, mode: blendMode } })把这些默认值合并进粒子配置。这意味着palette: pizza的本质是预设了particles.paint与particles.blend的默认值之后粒子绘制、描边与混合都会按照披萨主题色进行而任何显式配置仍可覆盖这些默认值与 README 的可自定义说明完全一致。按需加载与构建产物除了常规入口该包还提供懒加载版本 palettes/food/pizza/src/index.lazy.ts配合tsparticles/engine/lazy使用时options会在插件注册回调内通过动态import(./options.js)按需载入适合希望减小首屏包体的场景。浏览器全局版本 palettes/food/pizza/src/browser.ts 则会把loadPizzaPalette挂到globalThis上供 CDN 方式直接调用。构建配置见 palettes/food/pizza/rollup.config.js通过tsparticles/rollup-plugin的loadParticlesPalette生成多格式产物。相关资源调色板与预设总目录palettes食物主题调色板集合palettes/food含 apple、avocado、cherry、sushi、watermelon 等同系列调色板主文档markdown/Options.md【免费下载链接】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 Pizza 调色板：用 @tsparticles/palette-pizza 打造披萨主题暖色系粒子背景
tsParticles Pizza 调色板用 tsparticles/palette-pizza 打造披萨主题暖色系粒子背景【免费下载链接】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 官方仓库中的 Pizza Palettetsparticles/palette-pizza为主线讲解调色板包的安装、加载与自定义方法并结合引擎源码剖析调色板在tsParticles内部的工作原理。读完本文你将掌握如何在 CDN 或模块化项目中通过loadPizzaPalette快速启用一套披萨主题的暖色粒子配色并理解调色板与完整粒子行为配置之间的关系。Pizza Palette 是什么tsparticles/palette-pizza是 tsParticles 官方 Palettes 系列中属于食物主题food分支的一个调色板包位于仓库 palettes/food/pizza 目录下。它本身不包含任何粒子行为逻辑只负责提供一套以披萨食材为灵感的颜色方案——从披萨饼底、芝士、番茄酱、香肠到青椒与饼边焦色一应俱全。这一点在引擎的类型定义中有明确体现。调色板的核心接口 engine/src/Core/Interfaces/IPalette.ts 只包含四个字段字段类型含义namestring调色板名称backgroundstring背景色blendModeGlobalCompositeOperationCanvas 混合模式colorsSingleOrMultipleIPaletteColors一组或多组填充/描边颜色配置IPaletteColors又分为fill填充色含enable、opacity、value与stroke描边色含opacity、value、width两部分。也就是说调色板定义的是颜色而不是行为——实际粒子数量、形状、运动轨迹等仍需你在配置中自行指定这正是官方 README 反复强调的要点。调色板源码解析Pizza 调色板的实际颜色数据定义在 palettes/food/pizza/src/options.tsimport { type IPalette } from tsparticles/engine; export const options: IPalette { name: Pizza, background: #1b1207, blendMode: multiply, colors: { fill: { enable: true, value: [ #F4D6A0, #E0B06F, #C6863D, #D84315, #B71C1C, #FFD54F, #3A3A3A, #2E7D32, ], }, }, };可以看到该调色板定义了一个含 8 个颜色的填充色列表粒子在绘制时会从这些颜色中取色#F4D6A0/#E0B06F/#C6863D芝士、饼底等暖棕色调#D84315/#B71C1C番茄酱、香肠等红橙色系#FFD54F芝士黄#3A3A3A深灰模拟烤焦的饼边#2E7D32青椒等绿色点缀背景色为#1b1207接近深棕的暖黑混合模式采用multiply。需要说明的是README 中的色板表格与源码存在细微出入表格展示的是完整参考色卡包含#1A1000背景、#FFFFFF白、#1D3557蓝等辅助/中性色而options.ts才是运行时实际注入粒子系统的 8 色填充列表与真实背景色。使用时以源码为准。调色板注册逻辑在 palettes/food/pizza/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName pizza; export async function loadPizzaPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }函数将调色板以pizza为键名注册进引擎的插件管理器addPalette的实现见 engine/src/Core/Utils/PluginManager.ts本质是把name - IPalette存入内部Map此后配置中写palette: pizza即可引用它。快速上手官方 README 给出了三步快速清单安装tsparticles/engine或直接使用下方的 CDN bundle加载一个基础运行时包例如tsparticles/basic并在调用tsParticles.load(...)之前调用loadPizzaPalette在配置中同时提供调色板名称与一份最小化的粒子配置。因为调色板只定义颜色必须与运行时包和粒子选项搭配使用。CDN / Vanilla JS / jQueryscript srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-pizza4/tsparticles.palette-coloredSmokeAmber.min.js/script注意第二行脚本的文件名沿用了调色板系列统一的tsparticles.palette-coloredSmokeAmber.min.js命名各调色板包共用同一文件名模板但加载的确实是palette-pizza的 bundle。模块化安装npm 安装包名为tsparticles/palette-pizza见 palettes/food/pizza/package.json依赖tsparticles/engine支持import/require/ UMD 多种入口并额外导出了./lazy子路径用于按需加载npm install tsparticles/palette-pizza tsparticles/basic最小可用配置(async engine { await loadBasic(engine); await loadPizzaPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: pizza, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);要点拆解loadBasic(engine)先加载基础运行时使粒子具备数量、形状、大小、移动等基本能力loadPizzaPalette(engine)注册调色板必须在engine.load(...)之前完成配置中palette: pizza与注册时的键名pizza严格对应粒子配置数量 200、圆形、大小 10–15、速度 2由你自行决定调色板只接管配色。自定义与覆盖与任何标准tsParticles安装一样你可以通过显式定义属性来覆盖调色板带来的所有默认值官方在 README 中以 ⚠️ 提醒了这一点。例如先引用palette: pizza获取默认配色再手动覆盖particles.paint、particles.blend、背景色等字段实现披萨底色 自定义细节的效果。框架集成在 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等拥有官方 tsParticles 组件库的框架中使用方式一致安装tsparticles/palette-pizza后在组件初始化引擎时调用loadPizzaPalette(engine)即可具体接入方式以对应组件库文档为准。工作原理调色板如何注入粒子系统当配置中出现palette字段时引擎会在两个层面消费它。选项级背景与混合在 engine/src/Options/Classes/Options.ts 中#importPalette会根据调色板名从插件管理器取出数据把background应用到画布背景、把blendMode应用到混合模式。Pizza 调色板因此会把默认背景设为深棕#1b1207。粒子级颜色与绘制更关键的是 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette方法。其工作流程为从PluginManager取出调色板数据将colors规范化为数组支持多组颜色变体把调色板的fill.value8 个披萨色转换为paint.fill.color.valuefill.enable映射到paint.fill.enablefill.opacity若存在则一并映射若调色板定义了stroke则同步生成带width的描边绘制项最后通过this.load({ paint, blend: { enable: true, mode: blendMode } })把这些默认值合并进粒子配置。这意味着palette: pizza的本质是预设了particles.paint与particles.blend的默认值之后粒子绘制、描边与混合都会按照披萨主题色进行而任何显式配置仍可覆盖这些默认值与 README 的可自定义说明完全一致。按需加载与构建产物除了常规入口该包还提供懒加载版本 palettes/food/pizza/src/index.lazy.ts配合tsparticles/engine/lazy使用时options会在插件注册回调内通过动态import(./options.js)按需载入适合希望减小首屏包体的场景。浏览器全局版本 palettes/food/pizza/src/browser.ts 则会把loadPizzaPalette挂到globalThis上供 CDN 方式直接调用。构建配置见 palettes/food/pizza/rollup.config.js通过tsparticles/rollup-plugin的loadParticlesPalette生成多格式产物。相关资源调色板与预设总目录palettes食物主题调色板集合palettes/food含 apple、avocado、cherry、sushi、watermelon 等同系列调色板主文档markdown/Options.md【免费下载链接】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），仅供参考