本文讲解如何用 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
因此，正确写法为：
立即学习“Java免费学习笔记（深入）”；
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) 这一模式，即可灵活应对各类边界受限的随机定位需求。