CSS filter 不支持鱼眼变形，因其仅支持逐像素线性变换，而鱼眼需极坐标重映射；必须用 Canvas 2D 手动采样或 WebGL 着色器实现。
HTML5 本身不提供内置的“鱼眼变形”滤镜，filter CSS 属性也不支持鱼眼（fisheye）这类非线性几何变换；必须用 Canvas 2D 手动实现像素映射，或借助 WebGL（如 Three.js + 自定义着色器）。
为什么 CSS filter 做不了鱼眼
CSS filter（如 blur()、hue-rotate()）只支持线性/全局效果，所有变换都是逐像素独立计算、不改变坐标关系。鱼眼本质是极坐标重映射：中心区域放大、边缘剧烈压缩，需读取原图不同位置的像素并写入新坐标 —— 这超出了 CSS 滤镜能力范围。
-
filter: url(#fisheye)不生效，因为 SVG 滤镜也**不支持自定义几何扭曲**（<fedisplacementmap></fedisplacementmap>只能做微小位移，无法实现大范围重采样） - 试图用
transform: scale()+border-radius模拟？只是圆角裁剪+缩放，不是真实鱼眼投影 - 浏览器尚未支持
filter: fisheye()这类提案（目前无标准）
Canvas 2D 实现鱼眼的核心步骤
在 <canvas> 上绘制源图像后，遍历目标画布每个像素，反向计算它在原图中对应的坐标（极坐标转换），再用 getImageData/putImageData 或 drawImage 采样。
- 把目标像素
(x, y)转为以画布中心为原点的相对坐标(dx, dy) - 计算极径
r = Math.sqrt(dx*dx + dy*dy)和极角theta = Math.atan2(dy, dx) - 应用鱼眼公式（例如简单模型：
rOut = r * r / R，其中R是最大半径），得到新极径 - 转回直角坐标：
srcX = cx + rOut * Math.cos(theta)，srcY = cy + rOut * Math.sin(theta) - 用双线性插值（或直接取整）从原图采样，写入目标像素
注意：getImageData 会触发跨域错误，确保图片已设置 crossOrigin="anonymous"。
立即学习“前端免费学习笔记（深入）”；
WebGL 方案更高效但门槛高
用 WebGL 把图像传为纹理，在片元着色器里直接做极坐标变换，GPU 并行处理，1080p 图像也能实时渲染。Three.js 可简化流程：
- 创建
ShaderMaterial，顶点着色器保持四边形不变，片元着色器写鱼眼逻辑 - 关键变量：用
vUv（归一化 UV）转为极坐标，再套用rOut = pow(r, 0.5)等非线性函数模拟鱼眼 - 避免
texture2D采样越界，加if (r > 1.0) discard; - 比 Canvas 快 5–10 倍，但需处理着色器编译错误、精度限制（
mediump下pow易出错）
现成库推荐与取舍
别从零写 —— 用成熟方案省时间：
-
glfx.js：轻量级 WebGL 滤镜库，含fisheye效果，调用只需ctx.fisheye(0.5)（参数控制强度） -
pixi.js+pixi-filters：支持鱼眼，适合游戏/动效场景，但包体积较大 -
opencv.js：有cv.remap()可做任意映射，但启动慢、内存占用高，仅适合离线处理
移动端要注意：iOS Safari 对 WebGL 纹理尺寸有限制（常截断到 2048×2048），鱼眼变形后边缘拉伸易出现马赛克，得预缩放原图或手动分块处理。
