本文讲解如何用 javascript 的 math.random() 生成符合边界约束的随机横坐标 x，确保其始终位于半径 radius 所定义的安全区域内（即不超出画布左右边缘）。
在 Canvas 或 DOM 元素动画中，常需随机生成一个点的位置，但又必须保证该点完全可见——例如绘制一个半径为 radius 的圆形时，其圆心横坐标 x 必须满足：
✅ x ≥ radius（避免左边缘裁剪）
✅ x ≤ innerWidth − radius（避免右边缘裁剪）
原始写法 var x = Math.random() * innerWidth 生成的是 [0, innerWidth) 范围内的随机数，显然无法满足上述约束。
数学原理：
Math.random() 返回 [0, 1) 区间的浮点数。若要映射到任意区间 [min, max)，通用公式为：
var value = Math.random() * (max - min) + min;
本例中：
- min = radius
- max = innerWidth - radius
- 因此区间宽度为 (innerWidth - radius) - radius = innerWidth - 2 * radius
代入公式，得到最终安全随机坐标的正确写法：
var radius = 20; var x = Math.random() * (innerWidth - 2 * radius) + radius;
✅ 此表达式严格保证 x 落在 [radius, innerWidth − radius) 范围内，无论 innerWidth 多大（前提是 innerWidth > 2 * radius，否则无解——需在使用前校验）。
注意事项：
- 若 innerWidth ≤ 2 * radius，该表达式将产生负数或无效范围，建议添加防御性判断：
if (innerWidth <= 2 * radius) { console.warn('Screen too narrow for safe random positioning'); x = radius; // fallback } - 同理，若需同时控制纵坐标 y（如在 innerHeight 内避开上下边距），可套用相同逻辑：
var y = Math.random() * (innerHeight - 2 * radius) + radius;
掌握这一映射思维，不仅能解决屏幕定位问题，也是处理任何受限随机数生成（如游戏 spawn 区域、表单滑块初始值、响应式布局偏移等）的基础能力。
