如何在HTML Canvas中从指定线段中点绘制垂直线？

没问题，我来帮你搞定这个需求！咱们一步步拆解怎么做：

1. 计算线段的中点坐标 #

首先得算出原线段的中点，公式很直观：

const xm = (x1 + x2) / 2;
const ym = (y1 + y2) / 2;

这个中点就是咱们垂直线的基准点（可以是垂直线的中点，也可以是起点，看你想要的延伸方向）。

2. 确定垂线的方向和长度 #

原线段的方向向量是 (dx, dy) = (x2 - x1, y2 - y1)，垂直于它的向量有两个方向：

• 顺时针旋转90度：(-dy, dx)
• 逆时针旋转90度：(dy, -dx)

你可以根据需求选其中一个方向，或者同时向两边延伸出一条完整的垂直线。比如咱们设定垂直线总长度为100像素（你可以自己调整这个值），垂直线的两个端点坐标可以这么计算：

const dx = x2 - x1;
const dy = y2 - y1;
// 计算单位垂直向量，保证垂线长度不受原线段长短影响
const segmentLength = Math.sqrt(dx*dx + dy*dy);
const perpX = -dy / segmentLength;
const perpY = dx / segmentLength;

// 垂直线的两个端点
const lineLength = 100; // 可修改这个值调整垂线长短
const px1 = xm - perpX * lineLength/2;
const py1 = ym - perpY * lineLength/2;
const px2 = xm + perpX * lineLength/2;
const py2 = ym + perpY * lineLength/2;

3. 完整的绘制代码 #

把这些逻辑和你原来的线段绘制代码结合起来，完整代码如下：

// 假设已获取canvas的context对象
const x1 = 50, y1 = 50;
const x2 = 250, y2 = 150;

// 绘制原线段（修正了你原代码的小问题：用moveTo替代lineTo，避免从原点画多余线段）
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.strokeStyle = '#000'; // 原线段设为黑色
context.stroke();

// 计算中点
const xm = (x1 + x2) / 2;
const ym = (y1 + y2) / 2;

// 计算垂直线端点
const dx = x2 - x1;
const dy = y2 - y1;
const segmentLength = Math.sqrt(dx*dx + dy*dy);
const perpX = -dy / segmentLength;
const perpY = dx / segmentLength;
const lineLength = 100;

const px1 = xm - perpX * lineLength/2;
const py1 = ym - perpY * lineLength/2;
const px2 = xm + perpX * lineLength/2;
const py2 = ym + perpY * lineLength/2;

// 绘制垂直线
context.beginPath();
context.moveTo(px1, py1);
context.lineTo(px2, py2);
context.strokeStyle = '#ff0000'; // 垂直线设为红色，方便区分
context.stroke();

实用小提示 #

• 如果你只需要向单一方向延伸垂线（比如只向上或向下），只需要保留一个端点，从xm, ym直接画到该端点即可。
• 要是不想用单位向量，也可以直接用固定偏移量，比如px1 = xm - dy*0.2，这种方式更简单，但垂线长度会随原线段长短变化。

内容的提问来源于stack exchange，提问作者V-Vek P-Tel