在数据可视化、流程图、拓扑图等场景中，数据标记连线是展示不同节点之间关联关系的重要元素。很多开发者首先会想到使用CSS来实现这类连线效果，但实际上CSS在动态连线场景中存在较多局限性，而canvas凭借其灵活的绘图能力，成为实现数据标记连线的更优选择。
CSS实现数据标记连线的局限性
CSS可以通过transform属性旋转元素来模拟连线，但这种方式仅适用于固定位置、固定角度的静态连线场景。当数据标记的节点位置动态变化、连线需要跟随节点移动、或者需要支持曲线、箭头等复杂样式时，CSS的实现成本会大幅上升，甚至无法完成需求。
比如两个动态定位的节点，要计算连线的角度、长度，还需要实时更新CSS属性，不仅代码冗余，性能也不如canvas的批量绘制方案。因此实际开发中，数据标记连线更推荐使用canvas实现。
canvas绘制数据标记连线的核心步骤
1. 准备基础画布与节点数据
首先需要在页面中创建canvas元素，定义两个数据标记节点的坐标信息，后续连线将基于这两个坐标绘制。
<canvas id="lineCanvas" width="800" height="500"></canvas>
<script>
// 定义两个数据标记节点的坐标，实际场景中可以从接口或交互中获取
const node1 = { x: 100, y: 200, id: 'node1' };
const node2 = { x: 600, y: 300, id: 'node2' };
const canvas = document.getElementById('lineCanvas');
const ctx = canvas.getContext('2d');
</script>
2. 绘制基础直线连线
使用canvas的路径绘制API，从第一个节点的坐标移动到第二个节点的坐标，即可完成基础直线连线的绘制。
// 绘制基础直线连线
function drawStraightLine(ctx, startNode, endNode) {
ctx.beginPath();
// 移动到起点坐标
ctx.moveTo(startNode.x, startNode.y);
// 连线到终点坐标
ctx.lineTo(endNode.x, endNode.y);
// 设置连线样式
ctx.strokeStyle = '#409eff';
ctx.lineWidth = 2;
// 执行绘制
ctx.stroke();
}
// 调用绘制函数
drawStraightLine(ctx, node1, node2);
3. 添加连线箭头与曲线效果
实际场景中连线往往需要箭头标识方向，或者采用曲线让连线更美观。可以通过计算箭头坐标、使用贝塞尔曲线来实现这些效果。
// 绘制带箭头的贝塞尔曲线连线
function drawCurveLineWithArrow(ctx, startNode, endNode) {
// 计算控制点，让曲线更自然
const controlX = (startNode.x + endNode.x) / 2;
const controlY = Math.min(startNode.y, endNode.y) - 50;
ctx.beginPath();
ctx.moveTo(startNode.x, startNode.y);
// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(controlX, controlY, endNode.x, endNode.y);
ctx.strokeStyle = '#67c23a';
ctx.lineWidth = 2;
ctx.stroke();
// 绘制箭头
const arrowLength = 10;
// 计算连线终点处的切线角度
const dx = endNode.x - controlX;
const dy = endNode.y - controlY;
const angle = Math.atan2(dy, dx);
// 计算箭头两个端点的坐标
const arrowX1 = endNode.x - arrowLength * Math.cos(angle - Math.PI / 6);
const arrowY1 = endNode.y - arrowLength * Math.sin(angle - Math.PI / 6);
const arrowX2 = endNode.x - arrowLength * Math.cos(angle + Math.PI / 6);
const arrowY2 = endNode.y - arrowLength * Math.sin(angle + Math.PI / 6);
ctx.beginPath();
ctx.moveTo(endNode.x, endNode.y);
ctx.lineTo(arrowX1, arrowY1);
ctx.moveTo(endNode.x, endNode.y);
ctx.lineTo(arrowX2, arrowY2);
ctx.strokeStyle = '#67c23a';
ctx.lineWidth = 2;
ctx.stroke();
}
// 调用带箭头曲线绘制函数
drawCurveLineWithArrow(ctx, node1, node2);
4. 实现连线与节点的交互效果
数据标记连线往往需要支持 hover 高亮、点击选中交互，可以通过判断鼠标坐标是否在连线附近来实现。
// 判断鼠标是否点击到连线附近
function isPointNearLine(mouseX, mouseY, startNode, endNode, lineWidth = 2) {
// 计算点到直线的距离
const A = mouseX - startNode.x;
const B = mouseY - startNode.y;
const C = endNode.x - startNode.x;
const D = endNode.y - startNode.y;
const dot = A * C + B * D;
const lenSq = C * C + D * D;
let param = -1;
if (lenSq !== 0) {
param = dot / lenSq;
}
let xx, yy;
if (param < 0) {
xx = startNode.x;
yy = startNode.y;
} else if (param > 1) {
xx = endNode.x;
yy = endNode.y;
} else {
xx = startNode.x + param * C;
yy = startNode.y + param * D;
}
const dx = mouseX - xx;
const dy = mouseY - yy;
// 距离小于线宽+容错值则判定为点击到连线
return Math.sqrt(dx * dx + dy * dy) < (lineWidth + 5);
}
// 监听canvas点击事件
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
if (isPointNearLine(mouseX, mouseY, node1, node2)) {
alert('点击到了数据标记连线');
}
});
canvas绘制数据标记连线的优化技巧
- 批量绘制时开启
ctx.save()和ctx.restore()保存样式状态，避免样式互相影响 - 节点位置变化时，先调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空画布再重新绘制，避免连线残留 - 对于大量连线场景，可以使用离屏canvas缓存静态连线，减少主线程绘制压力
- 连线文字标注可以通过
ctx.fillText()方法绘制在连线中间位置，提升可读性
常见问题解答
连线在高清屏下模糊怎么办
可以通过设置canvas的width和height为显示尺寸的2倍，再通过CSS将canvas缩放到实际显示大小，同时调用ctx.scale(2, 2)适配绘制比例，解决高清屏模糊问题。
如何实现连线动画效果
可以使用requestAnimationFrame循环更新连线的绘制进度，比如从起点到终点逐步绘制线条，或者让连线有流动的光效，提升视觉效果。