canvas锯齿源于双线性插值、坐标未对齐像素中心及高dpi下物理像素不足；需协同启用imagesmoothingenabled、调优imagesmoothingquality、强制坐标对齐（如+0.5偏移或translate）、适配dpr，并按用途区分平滑与像素保真模式。
Canvas图形出现锯齿，核心在于浏览器默认用双线性插值缩放图像、坐标未对齐像素中心、以及高DPI屏幕下物理像素不足。抗锯齿不是开关式操作，而是靠imageSmoothingEnabled、imageSmoothingQuality、坐标对齐和DPR适配协同生效。
启用并调优图像平滑属性
Canvas 2D上下文提供原生控制接口，必须显式设置才能发挥效果：
-
ctx.imageSmoothingEnabled = true是基础前提，默认虽为true，但部分环境（如某些移动端WebView）可能重置为false，建议始终显式开启 -
ctx.imageSmoothingQuality = "high"可提升插值质量，目前Chrome/Firefox/Edge稳定支持；Safari需配合其他手段（如降步缩放）弥补 - 注意：该设置仅影响
drawImage()及带缩放/旋转的图像绘制，对fillRect()或lineTo()等几何绘图无直接作用
强制像素对齐坐标系
亚像素渲染是几何图形锯齿的主因——哪怕0.1px偏移，浏览器就会混合多个物理像素颜色：
- 对1px线条或边框，将起始点设为
Math.round(x) + 0.5，使其落在像素中心（例如ctx.moveTo(10.5, 20.5)） - 可全局偏移一次：
ctx.translate(0.5, 0.5)，后续所有整数坐标自动对齐（适合全画布统一绘制） - 避免混用：若已用
translate(0.5, 0.5)，就不要再对单个点额外加0.5，否则错位
适配高DPI屏幕（关键步骤）
在Retina或Windows HiDPI屏上，仅CSS缩放会导致模糊——逻辑尺寸没变，但物理像素被拉伸：
- 读取
const dpr = window.devicePixelRatio || 1 - 设置canvas真实分辨率：
canvas.width = canvas.clientWidth * dpr，canvas.height = canvas.clientHeight * dpr - 用CSS还原显示尺寸：
canvas.style.width = canvas.clientWidth + "px"，canvas.style.height = canvas.clientHeight + "px" - 此时绘图仍用逻辑像素（如宽300px），但底层有600×dpr物理像素承载细节，抗锯齿才有施展空间
区分用途：抗锯齿与像素保真不可兼得
同一套设置无法同时满足清晰图标和复古像素画：
- 需要抗锯齿（UI图标、图表、照片缩放）：保持
imageSmoothingEnabled = true，CSS中省略image-rendering或设为auto - 需要硬边保真（像素艺术、游戏精灵）：设
ctx.imageSmoothingEnabled = false，并给canvas元素添加style="image-rendering: pixelated;" - 切勿混用：在同一个canvas上动态切换平滑状态，易引发渲染不一致或闪烁
