canvas适合高频重绘与动态元素（如仪表盘、粒子动画），svg适合结构化、需交互或缩放的矢量内容（如流程图、地图标注），二者应依“是否需缩放、交互、矢量保真”等实际需求选择。
没有“哪个更好用”的通用答案，只有“在什么场景下更合适”。选错技术栈，后期改起来比重写还累。
Canvas 适合高频重绘、大量动态元素的场景
比如实时仪表盘、粒子动画、游戏主画布、视频帧处理。它不保留图形状态，每次 requestAnimationFrame 都得手动清空再重画——这反而是优势：内存占用可控，CPU 渲染压力集中在 JS 层，浏览器不用维护 DOM 树。
- 画 1000 个移动小球？Canvas 每帧只调
clearRect()+ 1000 次fillCircle()，DOM 不膨胀 - 要导出为 PNG？直接调
toDataURL("image/png")，SVG 得靠第三方库或canvg中转 - 注意 canvas 是像素依赖的：
canvas.width和canvas.height是逻辑像素，必须手动适配设备像素比（window.devicePixelRatio），否则在 Retina 屏上模糊
SVG 更适合结构化、需交互或缩放的矢量内容
比如流程图、地图标注、图标系统、可点击的统计图表。每个 <circle></circle>、<path></path> 都是真实 DOM 节点，能直接绑 onclick、加 class、用 CSS 控制 stroke-dashoffset 做路径动画。
- 用户点击某条折线想查看详情？直接给
<polyline></polyline>加事件监听，不用自己算坐标范围 - 要响应式缩放到全屏？设
viewBox+width="100%" height="auto"，浏览器自动等比拉伸，无损 - 别把 SVG 当成“画布”去手动画：用
<g transform="translate() scale()"></g>组合变换，比 Canvas 手动算矩阵快得多
混合使用时，Canvas 渲染 SVG 的常见坑
想用 Canvas 显示 SVG 素材（比如加载外部 .svg 文件后绘制到 canvas 上），不能直接 drawImage(svgElement) ——多数浏览器会报 SecurityError 或空白。
- 正确做法：先用
XMLSerializer把 SVG 转成字符串，再用Blob+URL.createObjectURL()生成临时 URL，最后new Image().src = url - 如果 SVG 含外部引用（如
<image href="logo.png"></image>）或内联样式，转成图片后可能丢失；建议提前内联所有资源或用canvg库解析渲染 - Canvas 渲染 SVG 后就失去矢量特性：放大照样糊，只是“骗过”了初始显示需求
真正难的不是语法，是判断“这个图形会不会被用户缩放”“要不要支持右键另存为”“点击区域是否需要精确到 2px 内”。这些决策点一旦定错，后面补救成本远高于初期多花十分钟评估。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
