Canvas 与 SVG 在 JS 画线场景下的选择对比

一、底层渲染机制：立即模式与保留模式

理解 Canvas 与 SVG 在画线时的性能和代码组织差异，首先要理解浏览器对两者内存模型和生命周期的不同处理机制。

1. SVG 的保留模式（Retained Mode）

SVG 是基于 XML 的矢量图形标准。在浏览器中，一个 <svg> 容器内部的每一条 <line>、<polyline> 或 <path> 都是一个完整的 DOM 元素对象（C++ 层面对应 WebKit/Blink 中的 SVGElement）。

• 内存常驻：每个线段元素都会在浏览器内存中创建对应的节点，占据样式树（CSSOM）和渲染树（RenderTree）开销。
• 自动脏矩形局部重绘：当你通过 JS 修改某一条连线的 d 坐标属性时，浏览器只计算该几何图形变动的局部包围盒，由内核自动完成图层排版和重绘，不需要开发者干预全量重绘。
• 分辨率无关：无论页面如何缩放，或在高 DPI 屏幕（Retina）上展示，浏览器内核在合成阶段都会按矢量数学方程重新光栅化，线条始终保持清晰锐利。

2. Canvas 的立即模式（Immediate Mode）

HTML5 <canvas> 则提供了一块单一固定分辨率的像素缓冲区。JS 代码获取其 2D 上下文（ctx）后，通过一系列过程式命令定义画笔状态并向缓冲区直接写入像素颜色。

• 画完即忘（Fire and Forget）：执行 ctx.stroke() 之后，绘制的线条立即转化为位图点阵，浏览器并不在内存中保留“这是一条线段”的结构化对象。
• 极低内存底噪：无论你在画布上画了 10 条线还是 50,000 条线，Canvas 占用的内存空间只取决于画布像素尺寸（宽 × 高 × 4 字节显存），不会因线条增加而引起 DOM 树膨胀和垃圾回收（GC）压力。
• 全量擦除与重绘：由于位图不记录独立图元，当其中一条线的端点发生位移时，通常必须调用 ctx.clearRect(0, 0, width, height) 清空整张画布，并在 requestAnimationFrame 回调中重新遍历数据源执行全部线条的绘制。

二、画线关键能力与代码实现对比

在实际业务开发中，画线通常涉及路径构造、曲线平滑、交互事件绑定与高分屏适配等具体步骤。以下通过标准原生 JavaScript 示例对比两者的实际落地方式。

1. 基础画线与贝塞尔曲线绘制

实现一条由起点 (50, 100) 到终点 (350, 100)，带有平滑控制点 (200, 20) 的二次贝塞尔曲线：

SVG 实现方式（声明式 DOM）：

// 1. 创建 SVG 元素命名空间
const svgNS = "http://www.w3.org/2000/svg";
const path = document.createElementNS(svgNS, "path");

// 2. 声明路径数据与样式属性
path.setAttribute("d", "M 50 100 Q 200 20 350 100");
path.setAttribute("fill", "none");
path.setAttribute("stroke", "#456581");
path.setAttribute("stroke-width", "3");
path.setAttribute("stroke-dasharray", "6 3"); // 虚线支持
path.setAttribute("stroke-linecap", "round");

// 3. 挂载到容器中
document.getElementById("svg-container").appendChild(path);

Canvas 实现方式（过程式指令）：

const canvas = document.getElementById("canvas-board");
const ctx = canvas.getContext("2d");

// 1. 高分屏清晰度缩放配置
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);

// 2. 配置画笔状态机
ctx.lineWidth = 3;
ctx.strokeStyle = "#456581";
ctx.setLineDash([6, 3]); // 虚线支持
ctx.lineCap = "round";

// 3. 构建并绘制路径
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.quadraticCurveTo(200, 20, 350, 100);
ctx.stroke();

2. 交互拾取（Hit-Testing）与事件监听

画线功能往往需要支持“用户点击某条线以选中”、“鼠标悬停在线上显示连接点”、“拖拽线段调整端点”等操作。在这个环节，两者的开发复杂度有本质不同。

SVG 天然具备事件能力：因为每个 <path> 都是独立节点，可以直接调用 path.addEventListener("click", handler)。不仅支持所有标准 DOM 指针事件与冒泡传播，而且浏览器内核会自动将 stroke-width 纳入有效点击检测范围。若线条过细难以点击，SVG 只需外加一条透明的高宽度辅助路径（例如 stroke="transparent" stroke-width="12"）即可轻松解决。

Canvas 必须手工实现空间几何计算：由于 Canvas 对外只有一个顶层 DOM 元素，所有事件必须在 <canvas> 级别统一捕获，由开发者在 JS 中自行判断光标是否接触到线段。

对于直线段 (x1, y1) 到 (x2, y2)，Canvas 拾取算法通常需要计算鼠标当前坐标 (px, py) 到线段的最短垂线距离：

function isPointNearLine(px, py, x1, y1, x2, y2, tolerance = 4) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const lengthSq = dx * dx + dy * dy;
  
  if (lengthSq === 0) return Math.hypot(px - x1, py - y1) <= tolerance;

  // 计算投影点在线段上的比例参数 t
  let t = ((px - x1) * dx + (py - y1) * dy) / lengthSq;
  t = Math.max(0, Math.min(1, t)); // 截断到线段端点区间

  // 投影点坐标
  const projX = x1 + t * dx;
  const projY = y1 + t * dy;

  // 计算距离
  const dist = Math.hypot(px - projX, py - projY);
  return dist <= tolerance;
}

如果是三次贝塞尔曲线，垂线距离无法用简单初等数学公式快速求解，必须对参数方程进行微分逼近或采样分段折线，计算量显著增加。当线条数量达到数万条时，Canvas 拾取若采用遍历方式会直接造成鼠标移动卡顿，必须进一步构建 R-Tree 或 BVH 层次包围盒等空间索引结构。

三、性能分水岭与系统开销实测分析

决定选择 Canvas 还是 SVG 的首要量化指标，是画线场景中的图元数量规模和更新频率。

高分屏（Retina）与导出支持细节

• 高分屏清晰度：SVG 天然是矢量数学表示，放大 10 倍依然平滑；Canvas 必须在初始化和视口变动时监听 window.devicePixelRatio，动态将 canvas.width 设置为容器宽度的 dpr 倍，并通过 CSS 将显示宽高保持原样，否则在 MacBook、4K 显示器或高分手机上，绘制的线段边缘会出现明显的模糊发虚。
• 图片序列化与导出：Canvas 可以原生通过 canvas.toDataURL("image/png") 或 canvas.toBlob() 极速导出 PNG/JPEG 位图；SVG 则可以直接通过 svgNode.outerHTML 导出矢量 XML 文本，或者注入到 PDF/AI 矢量打印流程中，保留无损线宽和文本矢量图元。

四、典型画线场景推荐选型

为了帮助在工程实践中精准决策，以下整理了四大类最常见前端画线场景的具体技术选型：

1. 流程图、DAG 编排与网络拓扑连线（推荐：SVG）

场景特点：节点通常在几十到数百个之间，连线数量在 1,000 条以内。业务要求点击连线能弹出属性抽屉、支持自定义箭头标记（<marker>）、鼠标悬停出现连接锚点、连线上可渲染流动蚂蚁线动画。

选型理由：此类场景重在“交互精细度”而非“数量极限”。SVG 原生支持 <defs>、<marker id="arrow"> 定义端点箭头，且原生支持 CSS 伪类与动画。国内主流开源流程图框架（如 AntV X6、jsPlumb）均以 SVG 为主要连线渲染引擎。

2. 手绘白板、电子签名与草图涂鸦（推荐：Canvas）

场景特点：用户拖动鼠标或压感手写笔时，系统每秒产生 60~120 个高频采样点。线条不断延长并带有平滑笔锋、毛笔质感或橡皮擦擦除效果。

选型理由：手绘笔迹包含密集的点阵序列，若每笔生成一个 SVG 路径，几分钟内 DOM 节点就会突破数万个，导致浏览器崩溃。Canvas 的 ctx.lineTo 能以极低成本实时追加点阵，并通过 ctx.globalCompositeOperation = "destination-out" 实现像素级橡皮擦。

3. 海量金融 K 线图与时序折线监控（推荐：Canvas / 混合策略）

场景特点：几万个时间戳点的动态折线、指标均线、实时心跳波形图。每秒可能需要接收 WebSocket 数据推送并刷新视图。

选型理由：在 ECharts、Highcharts 等主流图表库中，几千点以下折线使用 SVG 能带来更精细的矢量渲染；但一旦启用大数据量模式（如十万点分时图），图表库会自动切换至 Canvas 甚至 WebGL 引擎。

4. 大型 CAD 图纸与地理地图标绘（推荐：双层混合协同方案）

场景特点：包含数十万条静态建筑/管线底图，但用户同时需要用鼠标高亮或圈选单根特定管线。

工程方案：采用分层架构——底层放置全屏透明 <canvas> 负责离屏光栅化海量静态线条网格；顶层叠加轻量 <svg> 层，仅在用户悬停或点击某条线时，动态创建单根 SVG 路径负责高亮与控制手柄操作。这种方案兼顾了海量底图的吞吐性能与焦点图元的 DOM 事件便利性。

五、全维度选型速查矩阵