ctx.filter="invert(100%)"不生效是因为它只影响后续绘制操作，不修改已有像素；最可靠方案是getImageData()+循环计算RGBA值（r/g/b=255-原值），兼容性好且可控性强。
HTML5 Canvas 中用 ctx.filter 实现颜色反转不生效？
直接写 ctx.filter = "invert(100%)" 在部分浏览器（尤其是 Safari 和旧版 Chrome）中会被忽略——ctx.filter 仅对后续的 drawImage()、fillRect() 等绘制操作生效，**不对已存在的 canvas 内容重绘**，也不会影响通过 putImageData() 写入的像素。
常见错误现象：ctx.filter = "invert(100%)"; ctx.drawImage(canvas, 0, 0); 却没变化，是因为你把 canvas 自己画回自己，而源 canvas 的像素早已是“原始色”，滤镜没机会作用于像素数据本身。
- 真正起效的方式是：先创建一个临时
canvas，用drawImage()把原图绘制过去，此时滤镜才作用于该绘制动作 - 或者放弃
ctx.filter，改用getImageData()+ 手动计算像素（兼容性更好、可控性强） -
ctx.filter不支持对ImageData对象操作，这点和 CSS filter 有本质区别
用 getImageData() + 循环翻转 RGBA 值最可靠
这是真正意义上“修改像素”的做法，100% 跨浏览器生效，且可精确控制（比如只反转 R/G/B，保留 alpha 不变）。
核心逻辑就是：读出每个像素的 r、g、b，分别替换为 255 - r、255 - g、255 - b，a 通常保持不变（除非你要做透明度反转）。
立即学习“前端免费学习笔记（深入）”；
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // R
data[i + 1] = 255 - data[i + 1]; // G
data[i + 2] = 255 - data[i + 2]; // B
// data[i + 3] 保持不变（alpha）
}
ctx.putImageData(imageData, 0, 0);
- 注意
data是 Uint8ClampedArray，索引每 4 位一组对应一个像素的 RGBA - 如果 canvas 没有跨域权限，
getImageData()会抛出SecurityError，需确保图片已设置crossOrigin="anonymous" - 大图（如 2000×1500）循环处理可能卡顿，可考虑用 Web Worker 或
Uint32Array视图批量处理（一次改一个 32 位整数）
用 CSS filter 临时覆盖 canvas 显示效果
如果你只是想在页面上「看起来」反转，并不要求导出反转后的图像数据，那么给 元素加 CSS 是最快方案：
canvas {
filter: invert(100%);
}优点是零 JS、无性能损耗、实时响应；缺点也很明确：
- 只是视觉层叠加，
toDataURL()或captureStream()输出的仍是原始像素 - 和页面其他元素混合时可能因层叠上下文导致失效（比如父容器有
transform或opacity） - 部分安卓 WebView 对
filter支持不稳定，尤其连用多个 filter 时
WebGL 方案适合高频/实时反转需求
如果项目已有 WebGL 上下文，或需要每帧都反转（比如视频流处理），用 fragment shader 写一行 gl_FragColor = vec4(1.0 - texture2D(u_texture, v_texCoord).rgb, 1.0); 效率远高于 CPU 像素遍历。
但引入 WebGL 成本高，调试门槛明显上升；普通静态图或偶尔反转完全没必要。
真正容易被忽略的是：颜色反转 ≠ 简单取反。sRGB 色彩空间下直接 255 - x 是近似处理，严格场景需先线性化再反转再伽马校正——不过绝大多数 UI 场景，直接字节取反已足够准确。
