贝塞尔曲线上随机绘方块问题：修改终点Y值后定位失效

问题出在计算方块Y坐标的代码里——你硬编码了起点和终点的Y值为canvas.height / 2，但实际当你修改endY时，这个值和曲线的真实终点Y不匹配，导致方块位置偏离曲线。

修正方法很简单：把计算y的公式里的两个canvas.height / 2分别替换成startY和endY，同时x坐标的计算也建议替换成对应的变量（虽然当前值一致，但代码更通用），这样就能和你绘制的贝塞尔曲线的起点、终点保持一致了。

修正后的完整代码如下：

JavaScript #

// 获取Canvas元素
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

function init() {
  // 初始化曲线起点（画布左侧中心）
  const startX = 0;
  const startY = canvas.height / 2;
  const endX = canvas.width;
  // 现在修改endY也不会出现定位异常了
  const endY = startY + 50;

  // 生成随机正负值，用于控制点偏移
  let randall = Math.floor(Math.random() * 100) % 2;
  let deltaY = randall == 0 ? 1 : -1;

  // 设置贝塞尔曲线控制点
  // 控制点1
  const cp1X = 150 + Math.floor(Math.random() * 200);
  const cp1Y = startY - 250 * deltaY;
  console.log("\n>控制点1 = (" + cp1X + ", " + cp1Y + ")");

  // 控制点2
  const cp2X = Math.floor(Math.random() * 500);
  const cp2Y = startY + 200 * deltaY;
  console.log("\n>控制点2 = (" + cp2X + ", " + cp2Y + ")");


  // 绘制贝塞尔曲线
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
  ctx.lineWidth = 2;
  ctx.strokeStyle = "black";
  ctx.shadowBlur = 8;
  ctx.shadowColor = "white";
  ctx.stroke();

  // 在曲线上随机绘制5个方块
  for (var squareCounter = 0; squareCounter < 5; squareCounter++) {
    const t = Math.random();
    // 修正x坐标计算：使用变量而非硬编码值，保证通用性
    const x = (1 - t) ** 3 * startX + 3 * (1 - t) ** 2 * t * cp1X + 3 * (1 - t) * t ** 2 * cp2X + t ** 3 * endX;
    // 修正y坐标计算：使用startY和endY代替硬编码的canvas.height/2
    const y = (1 - t) ** 3 * startY + 3 * (1 - t) ** 2 * t * cp1Y + 3 * (1 - t) * t ** 2 * cp2Y + t ** 3 * endY;
    ctx.fillStyle = "blue";
    ctx.fillRect(x - 4, y - 4, 8, 8);
  }
}

init();

CSS #

canvas {
  border: 1px solid black;
}

HTML #

<canvas id="myCanvas" width="600" height="300"></canvas>

内容的提问来源于stack exchange，提问作者Sirab33