在 Canvas 中绘制矢量图标并保持高清清晰，本质是用足够高的物理像素密度来模拟矢量效果。需DPR感知初始化画布、用SVG路径转Canvas路径重绘、关闭插值与抗锯齿、配合CSS pixelated渲染。
Canvas 本身不是矢量渲染器，它输出的是位图，所以“在 Canvas 中绘制矢量图标并保持高清清晰”，本质是**用足够高的物理像素密度来模拟矢量效果**，同时规避插值、抗锯齿和坐标偏移带来的模糊。关键不在于“让 Canvas 变成 SVG”，而在于让它在高 DPR 设备上按真实像素一比一绘制。
一、必须做：DPR 感知的画布初始化
这是最基础也最容易被跳过的一步。不能只设 CSS 宽高，必须动态设置 canvas.width 和 canvas.height 为物理像素尺寸：
- 用
getBoundingClientRect()获取 Canvas 在页面中的 CSS 尺寸（比如 200×200px） - 乘以
window.devicePixelRatio得到实际绘图缓冲区大小（如 DPR=2 → 400×400） - 再用
ctx.scale(dpr, dpr)缩放绘图坐标系，这样你写fillRect(0,0,10,10)就真画出 10×10 物理像素的方块，而不是被拉伸的模糊块
二、推荐做：用 SVG 路径转 Canvas 路径（非光栅化）
如果你有 SVG 图标源文件（比如 <path d="M10 10 L30 10...">），不要把它转成 PNG 再 drawImage；而是解析 path 指令，用 Canvas 的 beginPath()、moveTo()、lineTo()、bezierCurveTo() 等 API 重绘——这本质上是“手写矢量路径”，缩放时不会失真，只要 DPR 适配到位，线条边缘就是锐利的。
可借助开源库如 canvas-svg 或轻量解析函数，把 d 字符串转为 Canvas 绘制指令。
三、小心做：关闭干扰性渲染特性
以下设置能防止浏览器“好心办坏事”：
-
ctx.imageSmoothingEnabled = false：禁用图片缩放插值（对图标素材尤其重要） -
ctx.fontSmoothingEnabled = false（部分浏览器支持）或改用ctx.webkitFontSmoothing = 'none'：减少文字抗锯齿虚边 - 绘制线条前确保坐标取整：
ctx.strokeRect(Math.round(x), Math.round(y), w, h)，避免 0.5 像素导致亚像素模糊
四、进阶技巧：配合 CSS 强制像素级渲染
对 Canvas 容器或 canvas 元素本身加一行 CSS，进一步锁定渲染行为：
canvas { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; }其中 pixelated 是现代标准，明确告诉浏览器：“别插值，每个逻辑像素就对应一个色块”。这对图标类小尺寸图形特别有效。
