tsParticles Filter Effect 完全指南用 CSS Filter 为粒子特效叠加风格化滤镜【免费下载链接】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 官方 effects 家族中的tsparticles/effect-filter插件将 CSSfilter能力接入粒子渲染管线让你无需手写 Canvas 绘制代码仅通过配置即可为粒子应用 blur、grayscale、sepia、drop-shadow、hue-rotate 等滤镜快速改变粒子视觉风格。本指南以仓库 effects/filter/README.md 为主线结合 effects/filter 目录下的源码与 engine 的注册机制完整覆盖安装、加载、配置、原理与实战注意事项帮助你直接把 Filter Effect 应用到自己的项目中。什么是 Filter EffectFilter Effect 是 tsParticles 提供的一个渲染前拦截型效果插件。它复用引擎中已有的粒子形状、运动与交互逻辑只在粒子绘制前后对 Canvas 上下文应用一层 CSS 滤镜context.filter从而让同一种粒子在不改变几何外观的前提下呈现出完全不同的视觉风格。典型应用包括老照片/胶片质感的粒子背景grayscale sepia contrast柔光、发光感粒子blur drop-shadow反色、卡通化等创意视觉invert saturate通过url()引用 SVG 滤镜实现更复杂的效果。它在仓库中的位置是 effects/filternpm 包名为tsparticles/effect-filter是官方提供的独立插件包可通过加载函数按需注册不会增加主包体积。安装与加载前置依赖Filter Effect 依赖核心引擎 tsparticles/engine 提供的tsParticles实例与插件注册机制两者需要一起安装。仓库中 effects/filter/package.json 将tsparticles/engine声明为peerDependencies这意味使用方需要自行安装引擎。npm / yarn 安装npm install tsparticles/engine tsparticles/effect-filter或使用 yarnyarn add tsparticles/engine tsparticles/effect-filterCDN / Vanilla JS / jQueryCDN 版本在引入tsparticles.effect.filter.min.js后会向全局对象暴露loadFilterEffect函数见 browser.ts无需 import 即可使用script srchttps://cdn.jsdelivr.net/npm/tsparticles-engine/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/effect-filter/script script (async () { await loadFilterEffect(tsParticles); await tsParticles.load({ id: tsparticles, options: { /* options */ /* 在 particles.effect.type 中使用 filter */ }, }); })(); /scriptESM / CommonJSCommonJS 方式const { tsParticles } require(tsparticles/engine); const { loadFilterEffect } require(tsparticles/effect-filter); (async () { await loadFilterEffect(tsParticles); })();ESM 方式import { tsParticles } from tsparticles/engine; import { loadFilterEffect } from tsparticles/effect-filter; (async () { await loadFilterEffect(tsParticles); })();懒加载Lazy入口如果你的打包器重视首屏体积可以导入tsparticles/effect-filter/lazy。仓库中 index.lazy.ts 会在效果真正被使用时才动态import(./FilterDrawer.js)从而把 FilterDrawer 拆成独立的异步 chunkimport { tsParticles } from tsparticles/engine/lazy; import { loadFilterEffect } from tsparticles/effect-filter/lazy; (async () { await loadFilterEffect(tsParticles); })();工作原理FilterDrawer 与插件注册Filter Effect 的核心实现位于 FilterDrawer.ts它实现了引擎定义的IEffectDrawer接口包含三个关键钩子方法作用particleInit(container, particle)粒子初始化时把particle.effectData中配置的滤镜字段复制到粒子实例属性上drawBefore(data)渲染前context.save()拼接各滤镜函数并赋给context.filterdrawAfter(data)渲染后context.restore()恢复画布上下文避免滤镜泄漏到后续绘制loadFilterEffectindex.ts在内部调用engine.pluginManager.addEffect(filter, () new FilterDrawer())完成注册注册机制位于 PluginManager.ts。注册完成后配置particles.effect.type: filter时引擎即可解析到对应的 drawer。drawBefore中 filter 字符串的拼接逻辑对应 IFilterData.ts 中的字段blur与hueRotate为数字时自动补充单位blur(2px)、hue-rotate(45deg)传字符串则原样使用dropShadow与url直接作为字符串嵌入drop-shadow(2px 2px 4px rgba(0,0,0,0.5))、url(#filterId)其余数值型滤镜brightness、contrast、grayscale、invert、opacity、saturate、sepia直接填充未设置的属性会被跳过最终以空格分隔多个滤镜函数并trim()后赋值给context.filter。配置详解Filter Effect 的配置分两层particles.effect负责选择效果类型options.filter负责传递滤镜数据。粒子层 effect 选项effect对象定义在引擎的 Effect.ts 中有三个属性属性类型默认值说明typestring/string[][]效果名称Filter Effect 注册名固定为filteroptionsShapeData{}按效果名存放的数据载荷Filter 的配置写在options.filter下closebooleantrue效果路径是否闭合对 filter 效果无实际绘制影响通常保持默认从 Effect.ts 的doLoad可以看出options会按效果名做deepExtend深度合并因此你可以分多次合并配置而无需一次性写全。滤镜参数options.filteroptions.filter是传给FilterDrawer的数据对象支持以下字段完整字段见 IFilterData.ts字段类型生成的 CSS filter 示例说明blurnumber/stringblur(2px)模糊半径数字自动加px字符串原样brightnessnumberbrightness(1.2)亮度倍率1为原始值contrastnumbercontrast(1.5)对比度倍率1为原始值dropShadowstringdrop-shadow(2px 2px 4px rgba(0,0,0,0.5))完整字符串需自备单位grayscalenumbergrayscale(1)灰度比例0~1hueRotatenumber/stringhue-rotate(45deg)色相旋转数字自动加deginvertnumberinvert(1)反色比例0~1opacitynumberopacity(0.5)透明度0~1saturatenumbersaturate(2)饱和度倍率1为原始值sepianumbersepia(0.8)棕褐色比例0~1urlstringurl(#feColorMatrix)引用 SVG 滤镜的 URL完整配置示例一个老胶片风格的粒子配置{ particles: { effect: { type: filter, options: { filter: { grayscale: 0.8, sepia: 0.4, contrast: 1.1, brightness: 1.05 } } } } }一个柔光发光风格的配置{ particles: { effect: { type: filter, options: { filter: { blur: 1, dropShadow: 0 0 6px rgba(255, 200, 100, 0.8) } } } } }数据流从配置到 Canvas结合引擎 Particle.ts 的初始化流程可以还原完整链路tsParticles.load()解析配置Effect类把options.filter深合并进effect.options粒子创建时读取effect.type若匹配已注册的filter把options.filter拷贝为particle.effectDataFilterDrawer.particleInit将effectData的字段展开到粒子实例filterBlur、filterGrayscale等字段定义见 FilterParticle.ts每帧绘制时drawBefore根据粒子实例属性拼接context.filter绘制形状后drawAfter恢复上下文。这意味着同一粒子实例在任意时刻都携带完整的滤镜快照便于后续扩展按粒子差异化配置。注意事项与常见问题Safari 兼容性CanvasRenderingContext2D.filter在 Safari 与 iOS Safari 中默认未启用MDN 文档有说明需要用户在浏览器设置中手动开启。因此面向 Apple 设备用户时需谨慎使用本效果建议提供降级方案或在使用前检测context.filter支持情况。README 中也明确提示了这一点。加载顺序必须在tsParticles.load(...)之前调用await loadFilterEffect(tsParticles)否则引擎注册表中没有filter效果配置会被静默忽略粒子按普通方式渲染。调试建议一次只改动一个滤镜组例如先只调blur再叠加sepia便于快速定位回归检查是否缺少 peer 依赖tsparticles/engine多滤镜叠加时注意顺序CSS filter 函数按书写顺序执行blur与drop-shadow先后不同效果也不同大数量粒子 全局滤镜可能带来性能开销可优先用较大尺寸粒子或降低粒子密度。与其他模块的组合Filter Effect 只干预渲染阶段不影响粒子的移动、旋转、形状、交互等行为因此可以自由与仓库中其他模块组合形状shapes 下的任意 shapecircle、star、heart、emoji 等都可作为滤镜载体移动与更新器updaters 下的 color、size、opacity、rotate 等更新器照常生效交互interactions 下的 connect、grab、bubble 等交互插件不受影响其他效果仓库 effects 下还有 bubble、shadow、trail、particles 等同族插件注册与配置方式一致可叠加使用。小结tsparticles/effect-filter通过注册效果 渲染前设置context.filter 渲染后恢复的简洁设计把完整 CSS 滤镜能力交还给配置层。本文覆盖了从安装加载、配置参数到源码数据流的完整链路并给出了胶片、柔光等可直接套用的配置示例。在动手之前请记住两条关键规则先loadFilterEffect再tsParticles.load以及Safari 默认不开启 canvas filter。【免费下载链接】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），仅供参考 
长河君 · 2026/9/17 23:01:01 · 阅读 1.2k tsParticles Filter Effect 完全指南：用 CSS Filter 为粒子特效叠加风格化滤镜
tsParticles Filter Effect 完全指南用 CSS Filter 为粒子特效叠加风格化滤镜【免费下载链接】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 官方 effects 家族中的tsparticles/effect-filter插件将 CSSfilter能力接入粒子渲染管线让你无需手写 Canvas 绘制代码仅通过配置即可为粒子应用 blur、grayscale、sepia、drop-shadow、hue-rotate 等滤镜快速改变粒子视觉风格。本指南以仓库 effects/filter/README.md 为主线结合 effects/filter 目录下的源码与 engine 的注册机制完整覆盖安装、加载、配置、原理与实战注意事项帮助你直接把 Filter Effect 应用到自己的项目中。什么是 Filter EffectFilter Effect 是 tsParticles 提供的一个渲染前拦截型效果插件。它复用引擎中已有的粒子形状、运动与交互逻辑只在粒子绘制前后对 Canvas 上下文应用一层 CSS 滤镜context.filter从而让同一种粒子在不改变几何外观的前提下呈现出完全不同的视觉风格。典型应用包括老照片/胶片质感的粒子背景grayscale sepia contrast柔光、发光感粒子blur drop-shadow反色、卡通化等创意视觉invert saturate通过url()引用 SVG 滤镜实现更复杂的效果。它在仓库中的位置是 effects/filternpm 包名为tsparticles/effect-filter是官方提供的独立插件包可通过加载函数按需注册不会增加主包体积。安装与加载前置依赖Filter Effect 依赖核心引擎 tsparticles/engine 提供的tsParticles实例与插件注册机制两者需要一起安装。仓库中 effects/filter/package.json 将tsparticles/engine声明为peerDependencies这意味使用方需要自行安装引擎。npm / yarn 安装npm install tsparticles/engine tsparticles/effect-filter或使用 yarnyarn add tsparticles/engine tsparticles/effect-filterCDN / Vanilla JS / jQueryCDN 版本在引入tsparticles.effect.filter.min.js后会向全局对象暴露loadFilterEffect函数见 browser.ts无需 import 即可使用script srchttps://cdn.jsdelivr.net/npm/tsparticles-engine/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/effect-filter/script script (async () { await loadFilterEffect(tsParticles); await tsParticles.load({ id: tsparticles, options: { /* options */ /* 在 particles.effect.type 中使用 filter */ }, }); })(); /scriptESM / CommonJSCommonJS 方式const { tsParticles } require(tsparticles/engine); const { loadFilterEffect } require(tsparticles/effect-filter); (async () { await loadFilterEffect(tsParticles); })();ESM 方式import { tsParticles } from tsparticles/engine; import { loadFilterEffect } from tsparticles/effect-filter; (async () { await loadFilterEffect(tsParticles); })();懒加载Lazy入口如果你的打包器重视首屏体积可以导入tsparticles/effect-filter/lazy。仓库中 index.lazy.ts 会在效果真正被使用时才动态import(./FilterDrawer.js)从而把 FilterDrawer 拆成独立的异步 chunkimport { tsParticles } from tsparticles/engine/lazy; import { loadFilterEffect } from tsparticles/effect-filter/lazy; (async () { await loadFilterEffect(tsParticles); })();工作原理FilterDrawer 与插件注册Filter Effect 的核心实现位于 FilterDrawer.ts它实现了引擎定义的IEffectDrawer接口包含三个关键钩子方法作用particleInit(container, particle)粒子初始化时把particle.effectData中配置的滤镜字段复制到粒子实例属性上drawBefore(data)渲染前context.save()拼接各滤镜函数并赋给context.filterdrawAfter(data)渲染后context.restore()恢复画布上下文避免滤镜泄漏到后续绘制loadFilterEffectindex.ts在内部调用engine.pluginManager.addEffect(filter, () new FilterDrawer())完成注册注册机制位于 PluginManager.ts。注册完成后配置particles.effect.type: filter时引擎即可解析到对应的 drawer。drawBefore中 filter 字符串的拼接逻辑对应 IFilterData.ts 中的字段blur与hueRotate为数字时自动补充单位blur(2px)、hue-rotate(45deg)传字符串则原样使用dropShadow与url直接作为字符串嵌入drop-shadow(2px 2px 4px rgba(0,0,0,0.5))、url(#filterId)其余数值型滤镜brightness、contrast、grayscale、invert、opacity、saturate、sepia直接填充未设置的属性会被跳过最终以空格分隔多个滤镜函数并trim()后赋值给context.filter。配置详解Filter Effect 的配置分两层particles.effect负责选择效果类型options.filter负责传递滤镜数据。粒子层 effect 选项effect对象定义在引擎的 Effect.ts 中有三个属性属性类型默认值说明typestring/string[][]效果名称Filter Effect 注册名固定为filteroptionsShapeData{}按效果名存放的数据载荷Filter 的配置写在options.filter下closebooleantrue效果路径是否闭合对 filter 效果无实际绘制影响通常保持默认从 Effect.ts 的doLoad可以看出options会按效果名做deepExtend深度合并因此你可以分多次合并配置而无需一次性写全。滤镜参数options.filteroptions.filter是传给FilterDrawer的数据对象支持以下字段完整字段见 IFilterData.ts字段类型生成的 CSS filter 示例说明blurnumber/stringblur(2px)模糊半径数字自动加px字符串原样brightnessnumberbrightness(1.2)亮度倍率1为原始值contrastnumbercontrast(1.5)对比度倍率1为原始值dropShadowstringdrop-shadow(2px 2px 4px rgba(0,0,0,0.5))完整字符串需自备单位grayscalenumbergrayscale(1)灰度比例0~1hueRotatenumber/stringhue-rotate(45deg)色相旋转数字自动加deginvertnumberinvert(1)反色比例0~1opacitynumberopacity(0.5)透明度0~1saturatenumbersaturate(2)饱和度倍率1为原始值sepianumbersepia(0.8)棕褐色比例0~1urlstringurl(#feColorMatrix)引用 SVG 滤镜的 URL完整配置示例一个老胶片风格的粒子配置{ particles: { effect: { type: filter, options: { filter: { grayscale: 0.8, sepia: 0.4, contrast: 1.1, brightness: 1.05 } } } } }一个柔光发光风格的配置{ particles: { effect: { type: filter, options: { filter: { blur: 1, dropShadow: 0 0 6px rgba(255, 200, 100, 0.8) } } } } }数据流从配置到 Canvas结合引擎 Particle.ts 的初始化流程可以还原完整链路tsParticles.load()解析配置Effect类把options.filter深合并进effect.options粒子创建时读取effect.type若匹配已注册的filter把options.filter拷贝为particle.effectDataFilterDrawer.particleInit将effectData的字段展开到粒子实例filterBlur、filterGrayscale等字段定义见 FilterParticle.ts每帧绘制时drawBefore根据粒子实例属性拼接context.filter绘制形状后drawAfter恢复上下文。这意味着同一粒子实例在任意时刻都携带完整的滤镜快照便于后续扩展按粒子差异化配置。注意事项与常见问题Safari 兼容性CanvasRenderingContext2D.filter在 Safari 与 iOS Safari 中默认未启用MDN 文档有说明需要用户在浏览器设置中手动开启。因此面向 Apple 设备用户时需谨慎使用本效果建议提供降级方案或在使用前检测context.filter支持情况。README 中也明确提示了这一点。加载顺序必须在tsParticles.load(...)之前调用await loadFilterEffect(tsParticles)否则引擎注册表中没有filter效果配置会被静默忽略粒子按普通方式渲染。调试建议一次只改动一个滤镜组例如先只调blur再叠加sepia便于快速定位回归检查是否缺少 peer 依赖tsparticles/engine多滤镜叠加时注意顺序CSS filter 函数按书写顺序执行blur与drop-shadow先后不同效果也不同大数量粒子 全局滤镜可能带来性能开销可优先用较大尺寸粒子或降低粒子密度。与其他模块的组合Filter Effect 只干预渲染阶段不影响粒子的移动、旋转、形状、交互等行为因此可以自由与仓库中其他模块组合形状shapes 下的任意 shapecircle、star、heart、emoji 等都可作为滤镜载体移动与更新器updaters 下的 color、size、opacity、rotate 等更新器照常生效交互interactions 下的 connect、grab、bubble 等交互插件不受影响其他效果仓库 effects 下还有 bubble、shadow、trail、particles 等同族插件注册与配置方式一致可叠加使用。小结tsparticles/effect-filter通过注册效果 渲染前设置context.filter 渲染后恢复的简洁设计把完整 CSS 滤镜能力交还给配置层。本文覆盖了从安装加载、配置参数到源码数据流的完整链路并给出了胶片、柔光等可直接套用的配置示例。在动手之前请记住两条关键规则先loadFilterEffect再tsParticles.load以及Safari 默认不开启 canvas filter。【免费下载链接】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），仅供参考