如何将角度转换为矩形边上的点？HTML Canvas绘图求助

我正在用HTML Canvas给图像绘制细节，其中需要添加一个指向北极的标识。北极方向用0-360度的角度表示，需要将这个角度转换为矩形图像边缘上的对应点，规则如下：

• 0度对应 { x: width / 2, y: 0 }（顶部中点）
• 90度对应 { x: width , y: height / 2 }（右侧中点）
• 180度对应 { x: width / 2, y: height }（底部中点）
• 270度对应 { x: 0 , y: height / 2 }（左侧中点）

我自己写了个函数，思路是从矩形中心画射线到对应角度的边缘点，通过斜率推导x或y值，但效果始终不对，尤其是角度接近角落的时候。怀疑和弧度计算有关，先附上我的代码：

interface Point {
  x: number;
  y: number;
}

interface Line {
  point1: Point;
  point2: Point;
}

function calcSlope(line: Line): number {
  return (line.point1.y - line.point2.y) / (line.point1.x - line.point2.x);
}

/**
 * 传入角度（度）和矩形尺寸，返回对应角度在矩形边缘的点
 */
function convertAngleToPoint(
  width: number,
  height: number,
  angle = 360
): Point | null {
  // 计算矩形中点
  const centerX = width / 2;
  const centerY = height / 2;

  // 计算中点到顶部中点的端点
  const endX = width / 2;
  const endY = 0;

  // 角度转弧度
  const angleInRadians = (angle * Math.PI) / 180;

  // 计算射线的目标点
  const targetX =
    Math.cos(angleInRadians) * (endX - centerX) -
    Math.sin(angleInRadians) * (endY - centerY) +
    centerX;
  const targetY =
    Math.sin(angleInRadians) * (endX - centerX) +
    Math.cos(angleInRadians) * (endY - centerY) +
    centerY;

  const slope = calcSlope({
    point1: { x: centerX, y: centerY },
    point2: { x: targetX, y: targetY },
  });

  if (angle === 0) {
    return { x: width / 2, y: 0 };
  }
  if (angle < 45) {
    // 标识在顶部
    const x = targetX + targetY / slope;
    return { x, y: 0 };
  }
  if (angle < 135) {
    // 标识在右侧
    const y = targetY + (width - targetX) * slope;
    return { x: width, y };
  }
  if (angle < 225) {
    // 标识在底部
    const x = targetX + (height - targetY) / -slope;
    return { x, y: height };
  }
  if (angle < 315) {
    // 标识在左侧
    const y = targetY + (0 - targetX) * -slope;
    return { x: 0, y };
  }

  if (angle < 361) {
    // 标识在顶部
    const x = targetX + targetY / slope;
    return { x, y: 0 };
  }

  return null;
}

原函数的问题分析 #

1. 射线方向计算错误：你用的旋转公式是针对点的旋转变换，但这里需要的是从中心出发的射线方向，原公式计算出的targetX/Y方向不对，导致后续斜率计算基准错误。
2. 斜率的局限性：当角度接近垂直或水平时，斜率会趋近于无穷大或零，容易出现计算溢出或NaN的情况；而且硬编码的45/135等角度区间只适用于正方形，矩形宽高不等时，临界角会变化，比如宽是高的2倍，中心到右上角的角度就不是45度。

修正后的实现 #

下面是更可靠的实现，通过计算射线与矩形四条边的交点，取符合条件的那个点，避免斜率带来的问题：

interface Point {
  x: number;
  y: number;
}

/**
 * 传入角度（度）和矩形尺寸，返回对应角度在矩形边缘的点
 */
function convertAngleToPoint(width: number, height: number, angle = 360): Point {
  const centerX = width / 2;
  const centerY = height / 2;
  
  // 标准化角度到0-360度范围
  angle = angle % 360;
  if (angle < 0) angle += 360;

  // 角度转弧度，Canvas中y轴向下，所以向上的方向dy取负
  const rad = (angle * Math.PI) / 180;
  const dx = Math.cos(rad);
  const dy = -Math.sin(rad);

  let t: number;
  let x: number, y: number;

  // 检查与上边（y=0）的交点
  if (dy !== 0) {
    t = (0 - centerY) / dy;
    if (t > 0) {
      x = centerX + dx * t;
      if (x >= 0 && x <= width) {
        return { x, y: 0 };
      }
    }
  }

  // 检查与右边（x=width）的交点
  if (dx !== 0) {
    t = (width - centerX) / dx;
    if (t > 0) {
      y = centerY + dy * t;
      if (y >= 0 && y <= height) {
        return { x: width, y };
      }
    }
  }

  // 检查与下边（y=height）的交点
  if (dy !== 0) {
    t = (height - centerY) / dy;
    if (t > 0) {
      x = centerX + dx * t;
      if (x >= 0 && x <= width) {
        return { x, y: height };
      }
    }
  }

  // 检查与左边（x=0）的交点
  if (dx !== 0) {
    t = (0 - centerX) / dx;
    if (t > 0) {
      y = centerY + dy * t;
      if (y >= 0 && y <= height) {
        return { x: 0, y };
      }
    }
  }

  // 理论上不会走到这里，返回中点作为兜底
  return { x: centerX, y: centerY };
}

实现思路说明 #

1. 标准化角度：先把角度处理到0-360度范围内，避免负数或超过360的情况。
2. 方向向量：根据角度计算射线的方向向量，注意Canvas的y轴是向下的，所以向上的方向需要把dy取负。
3. 交点计算：分别计算射线与四条边的交点，通过参数t判断交点是否在从中心向外的射线上（t>0），同时检查交点是否在对应边上（比如x在0到width之间），符合条件的就是我们要找的边缘点。

这个方法适配任意宽高的矩形，在所有角度下都能准确计算出边缘点，包括接近角落的情况。

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