如何将点位置限制在圆形范围内？当前矩形限制方法失效

你当前的代码是分别对x、y轴做独立的边界截断，这就导致了矩形的限制效果。要实现圆形范围内的位置约束，需要基于点到圆心的距离来处理，超出圆边界时将点映射到圆的边缘上。

修正后的完整代码 #

HTML

<canvas id="canvas" width="150" height="150"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvas = document.getElementById("canvas");
const center = { x: canvas.width / 2, y: canvas.height / 2 };
const point = { ...center };
const ctx = canvas.getContext("2d");
const GROUND_RADIUS = 50;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制圆形边界
  ctx.beginPath();
  ctx.arc(center.x, center.y, GROUND_RADIUS, 0, 2 * Math.PI);
  ctx.stroke(); 

  // 绘制可移动的点
  ctx.beginPath();
  ctx.arc(point.x, point.y, 10, 0, 2 * Math.PI);
  ctx.fill();
  
  requestAnimationFrame(render);
}

requestAnimationFrame(render);

canvas.addEventListener("mousemove", event => {
  // 将鼠标坐标转换为canvas内部相对坐标
  const rect = canvas.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;

  // 计算鼠标与圆心的偏移量
  const dx = mouseX - center.x;
  const dy = mouseY - center.y;
  // 计算鼠标到圆心的距离
  const distance = Math.sqrt(dx * dx + dy * dy);

  if (distance > GROUND_RADIUS) {
    // 超出圆范围时，将点映射到圆边缘
    const ratio = GROUND_RADIUS / distance;
    point.x = center.x + dx * ratio;
    point.y = center.y + dy * ratio;
  } else {
    // 在圆范围内时，直接使用鼠标坐标
    point.x = mouseX;
    point.y = mouseY;
  }
});

关键逻辑说明 #

• 坐标转换：先用getBoundingClientRect()获取canvas在视口中的位置，把鼠标的视口坐标转为canvas内部的相对坐标，避免canvas不在页面左上角时的坐标偏差。
• 距离计算：通过勾股定理计算鼠标点到圆心的直线距离。
• 边界映射：如果距离超过圆的半径，就按比例缩小偏移向量，让点刚好落在圆的边缘上；如果在范围内，直接使用鼠标坐标。

内容的提问来源于stack exchange，提问作者Tristan F.-R.