Canvas 2D 抗锯齿需对齐像素网格（如 x + 0.5）、禁用内部缩放而改用 CSS 缩放，WebGL 需启用 antialias: true 并同步 setPixelRatio 与 setSize，SVG 则天然抗锯齿且应内联使用。
Canvas 2D 绘图开启抗锯齿的正确方式
HTML5 中没有“建模”原生能力，所谓“HTML5 建模”实际多指 canvas 2D 上手动绘制几何图形（如多边形、贝塞尔曲线）或用 ctx.drawImage() 渲染缩放后的图像——锯齿问题就出在这里。默认情况下，canvas 2D 的图像缩放和路径描边/填充都**不自动启用高质量抗锯齿**，尤其在非整数坐标、非 1:1 缩放或高 DPI 屏幕下非常明显。
关键不是“打开某个开关”，而是控制渲染行为本身：
-
ctx.imageSmoothingEnabled = true（默认就是true），但仅对drawImage()生效；对路径绘制无效 - 路径锯齿主要来自坐标未对齐像素网格：用
Math.round(x) + 0.5对齐可显著改善直线/矩形边缘 - 避免用
ctx.scale(1.5, 1.5)后再画细线——缩放会放大 aliasing，应优先用 CSS 缩放 canvas 元素本身，并保持 canvas 内部绘图分辨率为整数倍
Three.js 等 WebGL 模型抗锯齿实操配置
真正在浏览器里做 3D 建模（如加载 glTF），基本依赖 three.js 或原生 WebGL。锯齿主要出现在模型边缘（尤其是斜面）、阴影贴图、后处理效果中。抗锯齿不是靠 CSS 或 canvas 属性，而要从渲染器初始化和材质两层控制：
- 创建
WebGLRenderer时必须传入{ antialias: true }，否则 MSAA（多重采样）完全关闭 - 注意：即使设了
antialias: true，部分集成显卡或移动端浏览器仍可能静默降级，可用renderer.getPixelRatio()和renderer.getSize()校验实际缓冲区尺寸是否匹配设备像素比 - 对透明物体（如玻璃、粒子）单独开启
material.transparent = true并设material.depthWrite = false，否则 MSAA 无法正确混合边缘
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);SVG 替代方案：无损缩放与天然抗锯齿
如果需求本质是展示清晰矢量图形（如拓扑图、流程图、简单 3D 投影线框），直接用 svg 比 canvas 更可靠。SVG 所有路径、形状天生基于数学描述，缩放、旋转不会产生锯齿，也不依赖 GPU 设置。
立即学习“前端免费学习笔记（深入）”；
- 避免把 SVG 当图片用：
或用fetch()+DOMParser注入 - 关键细节：给
shape-rendering="geometricPrecision"可强制高精度描边（默认是auto，浏览器可能为性能妥协） - 不要用
transform: scale(2)缩放整个，改用viewBox和width/height控制适配逻辑，避免重绘失真
高 DPI 屏幕下最易忽略的像素比陷阱
无论 canvas 还是 WebGL，最大坑是没处理好设备像素比（window.devicePixelRatio）。比如在 MacBook Pro 上，canvas.width = 800 表示 CSS 像素宽 800，但物理像素可能是 1600 —— 若不手动提升 canvas 缓冲区分辨率，所有绘制都会被拉伸模糊，抗锯齿再强也白搭。
- 必须同步设置 canvas 的
width/height属性（DOM 属性，非 CSS）为cssWidth * devicePixelRatio - Three.js 中调用
renderer.setPixelRatio()后，还需重新调用renderer.setSize()才真正生效 - Canvas 2D 需手动重设
ctx.scale(dpr, dpr)，否则绘图坐标会错位（例如你画在 (10,10)，实际落在 (10×2,10×2) 物理像素上）
抗锯齿不是特效开关，是渲染管线、坐标系统、设备能力三者对齐的结果。漏掉其中一环，其他设置全失效。
