本文讲解如何用 math.random() 生成一个严格位于屏幕内、且与边缘保持指定半径距离的随机横坐标 x，避免元素被截断或溢出。核心是将随机数映射到自定义区间 [radius, innerwidth − radius]。

在 Web 动画或 Canvas/HTML 元素定位中，常需让一个圆形（如小球、头像）在视口内自由移动，同时确保其完全可见——即不被左侧或右侧屏幕边缘裁剪。假设圆的半径为 radius，那么它的圆心横坐标 x 必须满足：

• x ≥ radius（不超出左边界）
• x ≤ innerWidth − radius（不超出右边界）

而 Math.random() 仅返回 [0, 1) 区间内的浮点数。要将其映射到任意目标区间 [min, max)，通用公式为：

var x = Math.random() * (max - min) + min;

代入本例的约束条件：

• min = radius
• max = innerWidth - radius
  → 区间宽度 = (innerWidth - radius) - radius = innerWidth - 2 * radius

因此，正确写法为：

const radius = 20;
const x = Math.random() * (innerWidth - 2 * radius) + radius;

✅ 这确保 x 始终落在 [20, innerWidth − 20) 范围内，圆心距左右边缘至少 20px，整个圆形始终可见。

⚠️ 注意事项：

• innerWidth 是浏览器窗口的 CSS 像素宽度（不含滚动条），若需兼容移动端或响应式场景，建议监听 resize 事件并动态更新；
• 若使用 window.innerWidth，请确保代码执行时 DOM 已就绪（如放在 DOMContentLoaded 或 load 事件中）；
• 此逻辑同样适用于纵坐标 y（替换为 innerHeight 和垂直半径约束）；
• 如需整数坐标（例如像素级精确定位），可包裹 Math.floor() 或 Math.round()，但注意 Math.ceil() 可能导致上界越界，推荐：

  const x = Math.floor(Math.random() * (innerWidth - 2 * radius)) + radius;

总结：随机数区间变换本质是线性缩放 + 平移，掌握 min + Math.random() * (max − min) 这一模式，即可灵活应对各类边界受限的随机定位需求。