在HTML Canvas中基于长边两点坐标与宽度绘制矩形的方案咨询

你的原有思路是几何绘制的标准逻辑，实际实现时更推荐用向量偏移法替代垂线方程计算，全程无三角函数、无需处理斜率边界问题，性能和稳定性更高，具体实现逻辑如下：

实现原理 #

全程只用基础算术运算就能得到所有顶点坐标：

1. 计算AB向量与长度
   • 向量：dx = x2 - x1，dy = y2 - y1
   • 长度：len = Math.hypot(dx, dy)，如果长度接近0说明两点重合，直接跳过绘制
2. 计算垂直方向单位向量，两个结果正好对应AB的两侧，完全规避垂线斜率不存在的边界（AB为竖线/水平线都能正常计算）
   • 左侧垂直单位向量：(-dy/len, dx/len)
   • 右侧垂直单位向量：(dy/len, -dx/len)
3. 用短边长度width乘以垂直单位向量得到偏移量，分别和A、B点坐标相加就能得到两个矩形的另外两个顶点

可直接运行的代码示例 #

/**
 * 以AB为长边，在AB两侧绘制两个宽度为width的矩形
 * @param {CanvasRenderingContext2D} ctx canvas上下文对象
 * @param {number} x1 点A的x坐标
 * @param {number} y1 点A的y坐标
 * @param {number} x2 点B的x坐标
 * @param {number} y2 点B的y坐标
 * @param {number} width 矩形短边的长度
 */
function drawDoubleRectByAB(ctx, x1, y1, x2, y2, width) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const abLength = Math.hypot(dx, dy);
  // 两点重合时不绘制
  if (abLength < 1) return;

  // 计算两个垂直方向的偏移量
  const offsetX1 = (-dy / abLength) * width;
  const offsetY1 = (dx / abLength) * width;
  const offsetX2 = (dy / abLength) * width;
  const offsetY2 = (-dx / abLength) * width;

  // 绘制AB一侧的矩形
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x2 + offsetX1, y2 + offsetY1);
  ctx.lineTo(x1 + offsetX1, y1 + offsetY1);
  ctx.closePath();
  ctx.stroke(); // 可替换为fill()填充矩形

  // 绘制AB另一侧的矩形
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x2 + offsetX2, y2 + offsetY2);
  ctx.lineTo(x1 + offsetX2, y1 + offsetY2);
  ctx.closePath();
  ctx.stroke();
}

方案优势 #

• 没有三角函数计算，性能更高，浮点计算误差更小
• 无需处理AB为水平/竖直线时垂线斜率不存在的兼容逻辑，代码更简洁
• 一次计算就能得到两侧矩形的所有顶点，不用重复做几何运算

如果你的需求是矩形总宽度为width（即AB两侧各占一半宽度），仅需要把上述代码中计算偏移量时的width替换为width / 2即可。

内容的提问来源于stack exchange，提问作者Majid Hojati