ctx.filter 是 canvas 2d 上下文的独立滤镜属性，仅支持 "none" 及有限 css 滤镜函数（如 blur、brightness），不兼容 css filter 字符串，chrome 120+ 实验性支持，firefox/safari 不支持，且仅影响后续绘制，无法同步 css 滤镜效果。
ctx.filter 不能同步 CSS 的 filter 样式，它和 CSS 滤镜完全无关，只是 Canvas 2D 上下文的一个独立、有限、且浏览器支持极差的滤镜接口。
ctx.filter 是什么？它支持哪些值？
ctx.filter 是 Canvas 2D Rendering Context 的一个可写属性，用于在调用 fill()、stroke()、drawImage() 等绘制操作时对绘制内容做一次性合成前处理。但它：
- 不接受 CSS
filter字符串（比如"blur(2px) brightness(1.2)"会直接被忽略） - 只接受少数几个预定义关键字：
"none"、"blur(…)"、"brightness(…)"、"contrast(…)"、"grayscale(…)"、"hue-rotate(…)"、"invert(…)"、"opacity(…)"、"saturate(…)"、"sepia(…)" - Chrome 仅从 120 版本起（2023 年底）开始实验性支持，Firefox 和 Safari 完全不支持（截至 2026 年 4 月）
- 即使启用，它也不作用于已绘制到 canvas 上的像素，只影响后续绘制动作（比如你先
drawImage()一张图，再设ctx.filter = "blur(3px)"，那张图不会变模糊）
为什么不能“同步”CSS filter？
- CSS
filter是渲染层效果，作用于整个元素盒模型（包括子元素、边框、阴影等），由浏览器合成器处理 -
ctx.filter是绘图上下文状态，仅控制当前CanvasRenderingContext2D的绘制行为，且不触发像素重采样或高斯卷积等真实模糊逻辑（blur()实际表现常为简单 box blur 或直接降级）
常见错误现象：
- 设置
ctx.filter = "blur(5px)"后drawImage()图片边缘发虚但无真实高斯模糊感 - 在 Firefox 或 Safari 中完全无反应，控制台也无报错
- 对已存在的 canvas 内容（比如之前画好的图形）调用
ctx.filter无效
真实可行的替代路径
如果你需要 canvas 输出与页面上 CSS 滤镜视觉一致的效果，只有两条路：
- 服务端/离线预处理：用 Node.js（sharp）、Python（Pillow）等生成带滤镜的图片再载入 canvas
-
前端像素级手动实现：用
getImageData()+ 自定义算法（如分离高斯核、FFT 加速）重算 RGBA 值，再putImageData()
其中后者是唯一纯前端可控方案，但要注意：
-
getImageData()要求图片同源或开启 CORS（img.crossOrigin = "anonymous"） - 大图（如 2000×1500）做高斯模糊易卡顿，需考虑 Web Worker 分块处理
-
blur()类效果必须自己实现，ctx.filter的"blur()"不可靠、不可控、不兼容
ctx.filter 目前不是 CSS 滤镜的 canvas 映射接口，它是个孤立、弱支持、易误用的实验性字段。真正要让 canvas “看起来像加了 CSS filter”，得绕开它，老老实实操作像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
