如何用JavaScript实现可变长度网格线段连接，并控制中间格子数？

<code class="html"><canvas id="gridCanvas" width="300" height="300"></canvas></code>

<code class="javascript">const canvas = document.getElementById('gridCanvas');
const ctx = canvas.getContext('2d');

// 网格参数
const cellSize = 20;
const numCellsX = 15;
const numCellsY = 15;

// 绘制网格
function drawGrid() {
  ctx.strokeStyle = 'lightgray';
  for (let x = 0; x <= numCellsX; x++) {
    ctx.beginPath();
    ctx.moveTo(x * cellSize, 0);
    ctx.lineTo(x * cellSize, numCellsY * cellSize);
    ctx.stroke();
  }
  for (let y = 0; y <= numCellsY; y++) {
    ctx.beginPath();
    ctx.moveTo(0, y * cellSize);
    ctx.lineTo(numCellsX * cellSize, y * cellSize);
    ctx.stroke();
  }
}

// 绘制连接线段
function drawLine(startX, startY, endX, endY, intermediateCells) {
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(startX * cellSize, startY * cellSize);

  // 计算并绘制中间点
  const deltaX = endX - startX;
  const deltaY = endY - startY;
  const stepX = deltaX / (intermediateCells + 1);
  const stepY = deltaY / (intermediateCells + 1);

  for (let i = 1; i <= intermediateCells; i++) {
    const x = startX * cellSize + stepX * i * cellSize;
    const y = startY * cellSize + stepY * i * cellSize;
    ctx.lineTo(x, y);
  }

  ctx.lineTo(endX * cellSize, endY * cellSize);
  ctx.stroke();
}


// 示例用法:  连接(0,0)到(5,5),中间包含3个格子
drawGrid();
drawLine(0, 0, 5, 5, 3);

// 示例用法: 连接(2,2)到(10,7),中间包含5个格子
drawLine(2, 2, 10, 7, 5);
</code>