当前位置：首页 > JavaScript

js 实现连线

2026-04-07 00:09:40JavaScript

使用Canvas绘制连线

Canvas API提供了一种在网页上绘制图形的方式。通过Canvas可以轻松实现两点之间的连线。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置线条样式
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;

// 开始绘制
ctx.beginPath();
ctx.moveTo(50, 50);  // 起点坐标
ctx.lineTo(200, 200); // 终点坐标
ctx.stroke();

使用SVG创建连线

SVG是另一种在网页上创建矢量图形的技术，适合创建可缩放的连线。

js 实现连线

<svg width="300" height="300">
  <line x1="50" y1="50" x2="200" y2="200" stroke="red" stroke-width="2"/>
</svg>

使用HTML+CSS实现简单连线

对于简单的直线连接，可以使用CSS的border和transform属性。

js 实现连线

<div class="connector"></div>

<style>
.connector {
  width: 200px;
  height: 2px;
  background-color: green;
  transform: rotate(45deg);
  transform-origin: 0 0;
}
</style>

实现可拖拽的连线

结合鼠标事件可以实现可交互的连线效果。

const canvas = document.getElementById('interactiveCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startX, startY, endX, endY;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  startX = e.offsetX;
  startY = e.offsetY;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  endX = e.offsetX;
  endY = e.offsetY;
  redraw();
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

使用第三方库实现高级连线

对于复杂的连线需求，可以考虑使用专门的图形库：

jsPlumb：专注于连接元素的库
D3.js：强大的数据可视化库
Konva.js：2D绘图库

// 使用jsPlumb示例
jsPlumb.connect({
  source: "element1",
  target: "element2",
  anchors: ["Right", "Left"],
  connector: ["Straight"],
  endpoint: "Dot"
});

标签: js