如何在 Canvas html 标记中绘制垂直线

Question

我有一个起始坐标（x1，y1）和结束坐标（x2，y2）的线。

context.beginPath();
context.lineTo(x1,y1);
context.lineTo(x2,y2);
context.stroke()

我想在 Canvas Tag 中从该线的中间画一条垂直线。

非常感谢热情的回复或指导。

Answer 1

线中间的坐标是两端坐标的平均值：

var midX = (x1 + x2) / 2;
var midY = (y1 + y2) / 2;

垂线的方向向量与原线相同，只是坐标被翻转，其中一个坐标乘以-1（乘以哪一个决定了线是顺时针还是逆时针） .将该方向向量添加到中点，就得到了垂直线。

var dx = (x2 - x1);
var dy = (y2 - y1);
context.moveTo(midX, midY);
context.lineTo(midX + dy, midY - dx);
context.stroke();

这将绘制一条与原始线长度相同的垂线。如果要绘制不同的长度，则需要调整方向矢量。阅读坐标几何和矢量以了解更多详细信息。

Answer 2

要绘制一条垂直线，您只需将其旋转 90º，请按照 this question answered before 操作，其中包含一些示例函数，例如：

function setTransformToLine(x1, y1, x2, y2) {
  const vx = x2 - x1;   // get the line as vector
  const vy = y2 - y1;
  const len = Math.hypot(vx, vy); // For <= IE11 use Math.sqrt(vx * vx + vy * vy)
  const nx = vx / len; // Normalise the line vector. Making it one
  const ny = vy / len; // pixel long. This sets the scale

  // The transform is the normalised line vector for x axis, y at 90 deg 
  // and origin at line start
  ctx.setTransform(nx, ny, -ny, nx, x1, y1); // set transform

  return len;
}