canvas图片缩放锯齿源于双线性插值、dpr未适配及坐标未对齐像素网格；需分层控制采样质量、缩放路径与渲染策略：启用high质量插值、降步缩放、适配高dpi、坐标对齐像素中心，并按用途区分抗锯齿与像素风保真。
Canvas 缩放图片时出现锯齿，本质是浏览器对非整数比例缩放采用双线性插值（而非更精细的双三次），加上设备像素比（DPR）未适配、坐标未对齐像素网格等多重因素叠加的结果。抗锯齿不是“一键开启”，而是需分层控制：源头采样质量、中间缩放路径、最终渲染策略三者协同。
确保 drawImage() 启用高质量插值
Canvas 默认启用图像平滑（ctx.imageSmoothingEnabled = true），但平滑质量可显式调控：
- 设置
ctx.imageSmoothingQuality = "high"（支持 Chrome/Firefox/Edge，Safari 部分版本需配合其他手段） - 避免在缩放倍率极小（如 0.1×）或极大（如 8×）时单步 drawImage —— 此时插值会严重丢失高频细节
- 若目标尺寸与原图差距较大，优先采用“降步缩放”：每次缩放到前一步的 50%，例如 1024→512→256→128，每步都用离屏 canvas 中转，能显著逼近双三次效果
适配高 DPI 屏幕（关键！）
在 Retina 或 Windows HiDPI 屏上，仅靠 CSS 缩放会导致物理像素被拉伸，直接放大模糊。必须同步调整 canvas 的实际分辨率：
- 读取
window.devicePixelRatio（如值为 2） - 设 canvas 元素的
width和height为clientWidth × dpr和clientHeight × dpr - 再用 CSS 将 canvas 的
style.width/style.height设回原始逻辑尺寸（如300px），保持布局不变 - 此时绘图坐标系仍用逻辑像素，但底层有足够物理像素承载细节，抗锯齿才有发挥空间
控制绘制坐标与线条对齐
锯齿常源于亚像素渲染——比如画一条 1px 线，起始点落在 (10.3, 20.7)，浏览器被迫混合周围像素颜色：
- 对直线、矩形等几何图形，将坐标四舍五入到
Math.round(x) + 0.5，强制对齐像素中心（尤其适用于 1px 边框） - 禁用不必要的变换：避免
ctx.scale(1.3, 1.3)后再画细线；如需缩放，优先用 CSS 缩放整个 canvas 元素，并保持内部绘图使用整数逻辑坐标 - 若必须用 transform，记得重置
ctx.setTransform(1, 0, 0, 1, 0, 0)防止误差累积
区分用途：抗锯齿 ≠ 像素风保真
需要清晰抗锯齿（如 UI 图标、矢量图表）和需要硬边锐利（如像素艺术）是相反需求：
- 抗锯齿场景：启用
imageSmoothingEnabled、设imageRendering: auto（或省略）于 canvas 元素 - 像素风场景：关闭平滑
ctx.imageSmoothingEnabled = false，并给 canvas 元素加 CSSimage-rendering: pixelated（注意：作用对象是 canvas，不是 img） - 二者不可混用——同一张图不能既柔边又硬边
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
