ctx.filter 对 stroke() 无效是规范限制，仅对 fill() 和 drawImage() 生效；极简线条应靠 lineWidth、lineCap 和 setLineDash 原生控制；需滤镜效果时须转为填充路径或改用 SVG。
HTML5 Canvas 用 ctx.filter 做极简线条滤镜行不通
直接说结论：ctx.filter 在大多数浏览器中对 stroke() 线条无效，尤其是 Chrome 和 Safari —— 你设了 ctx.filter = "blur(2px)" 或 "drop-shadow(1px 1px 2px #000)"，线条该硬还是硬，毫无反应。这不是写法错，是规范限制：Canvas 2D 的 filter 属性仅对 drawImage()、fill()（含文本）等“填充类”操作生效，stroke() 被明确排除在外。
真正能控制线条质感的只有 ctx.lineWidth、ctx.lineCap 和 ctx.setLineDash()
极简线条的核心不是后期滤镜，而是绘制时的原生控制。关键参数就三个：
-
ctx.lineWidth = 0.8：别用整数，0.7–1.2 之间最显“手绘感”或“纤细克制”，Canvas 会做 sub-pixel 插值 -
ctx.lineCap = "round"：消除线条端点的生硬直角，配合细线立刻柔和；"square"显机械，"butt"易露锯齿 -
ctx.setLineDash([2, 3])：极简不等于实线，短虚线（如[1, 2]）比长虚线更轻量，注意调用后需ctx.setLineDash([])清除，否则影响后续描边
想加阴影或模糊？只能绕过 stroke()，改用 fill() 模拟线条
把线条“画成形状”才能用 filter。原理是：用 lineTo() 构造一个极窄的多边形路径，再 fill() 它。这样 ctx.filter 就能生效。
ctx.filter = "drop-shadow(0 1px 1px rgba(0,0,0,0.15))"; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // 转为带厚度的路径（模拟 1px 线条） const w = 1; ctx.lineTo(150, 50 + w); ctx.lineTo(50, 50 + w); ctx.closePath(); ctx.fill(); // ✅ filter 此时起作用
缺点明显：路径必须闭合、计算量略增、圆角需手动贝塞尔逼近。但这是目前唯一能让“线条”响应 CSS filter 的可靠方式。
立即学习“前端免费学习笔记（深入）”；
SVG 是更自然的选择，但得放弃纯 Canvas
如果项目允许混合渲染，SVG 的 shape-rendering="crispEdges" 或 "geometricPrecision" 能精细控制线条抗锯齿行为，Canvas 做不到这点。
真正难的不是怎么加滤镜，而是意识到：Canvas 的“线条”本质是光栅化瞬时操作，没有中间表示；而极简风格恰恰依赖像素级确定性 —— 这和滤镜的模糊、叠加逻辑天然冲突。
