canvas不能直接绘制svg路径，需将d属性指令（如m、l、c）解析为moveto、lineto、beziercurveto等命令并调用stroke()/fill()；推荐用svgpath库解析，渲染前须调用beginpath()、设置颜色、缩放适配高分屏；整图渲染可用canvg。
Canvas 本身不能直接画 SVG 的 d 属性路径，必须把字符串里的指令（比如 M、L、C）拆开，再一条条转成 moveTo、lineTo、bezierCurveTo 这类 Canvas 命令，最后调用 stroke() 或 fill() 才能看到图形。
SVG 路径指令怎么对应到 Canvas 方法
SVG 路径由字母加数字组成，例如 d="M10 10 L50 50 C60 60,80 40,90 90 Z"。每个指令要映射为 Canvas 的具体操作：
-
M x y→ctx.moveTo(x, y) -
L x y→ctx.lineTo(x, y) -
C x1 y1, x2 y2, x y→ctx.bezierCurveTo(x1, y1, x2, y2, x, y) -
Q x1 y1, x y→ctx.quadraticCurveTo(x1, y1, x, y) -
Z→ctx.closePath()
注意相对指令（如 m、l）不是直接用坐标，而是以上一个点为基准做偏移，不能照搬绝对坐标的逻辑。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
推荐用 svgpath 库来解析路径
手动处理所有指令容易出错，尤其遇到椭圆弧 A、平滑贝塞尔 S/T、参数省略或逗号空格混排时。svgpath 是个轻量（约 3KB）、无依赖的解析库：
- 把原始
d字符串转成统一结构的命令数组，每个元素含type和标准化字段（如x、y、x1、y1） - 完整支持 SVG 1.1 所有指令，包括
A的参数归一化 - 用法简单：
const path = new SVGPathData(dString);，之后遍历path.commands即可
Canvas 渲染前必须做的几件事
即使路径解析正确，漏掉下面任何一项，图形都可能不显示或样式异常：
- 每次绘制前调用
ctx.beginPath()，否则新路径会和上一次意外连起来 - 显式设置
ctx.strokeStyle（描边色）或ctx.fillStyle（填充色），Canvas 默认没有颜色 - 描边必须调用
ctx.stroke()，填充需确保路径闭合并调用ctx.fill() - 高分辨率屏（如 Retina）要按
window.devicePixelRatio缩放canvas.width和canvas.height属性，避免模糊
canvg：适合整张 SVG 的一键渲染方案
如果要渲染的是完整 SVG 文件（含渐变、文本、分组、动画等），而不是单条路径，canvg 更合适：
- 支持大部分 SVG 规范，包括
<defs></defs>、<lineargradient></lineargradient>、<text></text>、内部<animate></animate> - 能保留鼠标事件（点击、悬停），并支持
start()/stop()控制动画 - 安装简单：
npm install canvg，使用只需两步：获取上下文 +Canvg.from(ctx, svgSource).start() - 对复杂图表（如桑基图、带半透明的多层路径）兼容性好，错误处理也更健壮
