本文讲解如何用 javascript 的 math.random() 生成一个严格位于屏幕内、避开左右边距（如圆形半径）的随机横坐标 x，确保元素不会被截断或溢出视口。
在 Web 动画或交互式图形开发中（例如绘制可移动的圆形、粒子效果或防越界拖拽），我们常需生成一个随机横坐标 x，使其始终处于安全区域内：既不能小于圆的半径 radius（否则左半部分被裁剪），也不能大于 innerWidth - radius（否则右半部分超出视口）。直接使用 Math.random() * innerWidth 会生成 [0, innerWidth) 范围内的值，无法满足该约束。
数学原理很简单：要生成 [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;
✅ 正确性验证：
- 当 Math.random() 返回 0 → x = 0 * (...) + radius = radius（紧贴左安全边界）
- 当 Math.random() 返回接近 1（如 0.999...）→ x ≈ (innerWidth - 2*radius) + radius = innerWidth - radius（紧贴右安全边界）
⚠️ 注意事项：
- innerWidth 是浏览器窗口的内部宽度（不含滚动条），适用于响应式场景；若需兼容旧版 IE，可用 document.documentElement.clientWidth 作为备选。
- 该逻辑同样适用于纵坐标 y（替换为 innerHeight 和垂直方向的 radius）。
- 若涉及 CSS px 像素渲染，请确保 x 为数值类型（Math.round(x) 可选，但非必需）。
掌握这一区间映射思维，不仅能解决屏幕定位问题，也是实现随机布局、碰撞检测、Canvas 动画等前端功能的基础数学能力。
