是网格里面每个线条都可以移动

要实现网格里面每个线条都可以移动，你可以采用类似于拖拽的思路，在鼠标按下和移动的时候记录鼠标的位置，然后根据鼠标的移动距离计算出需要移动的线条的位置，最后使用 `ctx.clearRect` 清除画布，然后重新绘制网格和线条。

下面是一个实现可移动网格线条的简单示例：

HTML 代码：

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript 代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var gridSpacing = 20;
var gridWidth = canvas.width;
var gridHeight = canvas.height;
var isDragging = false;
var lastMouseX = 0;
var lastMouseY = 0;
var linePositions = [];

// 初始化网格线条的位置
for (var i = 0; i <= gridWidth; i += gridSpacing) {
  linePositions.push({ x: i, y: 0 });
}

for (var j = 0; j <= gridHeight; j += gridSpacing) {
  linePositions.push({ x: 0, y: j });
}

function drawGrid() {
  ctx.beginPath();
  ctx.strokeStyle = "#cccccc";

  for (var x = 0; x <= gridWidth; x += gridSpacing) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, gridHeight);
  }

  for (var y = 0; y <= gridHeight; y += gridSpacing) {
    ctx.moveTo(0, y);
    ctx.lineTo(gridWidth, y);
  }

  ctx.stroke();
}

function drawLines() {
  ctx.beginPath();
  ctx.strokeStyle = "#ff0000";

  for (var i = 0; i < linePositions.length; i++) {
    var line = linePositions[i];
    ctx.moveTo(line.x, line.y - 5);
    ctx.lineTo(line.x, line.y + 5);
    ctx.moveTo(line.x - 5, line.y);
    ctx.lineTo(line.x + 5, line.y);
  }

  ctx.stroke();
}

function getLineIndex(x, y) {
  for (var i = 0; i < linePositions.length; i++) {
    var line = linePositions[i];
    if (Math.abs(line.x - x) < 5 && Math.abs(line.y - y) < 5) {
      return i;
    }
  }
  return -1;
}

canvas.addEventListener("mousedown", function (e) {
  isDragging = true;
  lastMouseX = e.pageX - canvas.offsetLeft;
  lastMouseY = e.pageY - canvas.offsetTop;
});

canvas.addEventListener("mouseup", function (e) {
  isDragging = false;
});

canvas.addEventListener("mousemove", function (e) {
  if (isDragging) {
    var mouseX = e.pageX - canvas.offsetLeft;
    var mouseY = e.pageY - canvas.offsetTop;
    var deltaX = mouseX - lastMouseX;
    var deltaY = mouseY - lastMouseY;

    var lineIndex = getLineIndex(lastMouseX, lastMouseY);
    if (lineIndex >= 0) {
      var line = linePositions[lineIndex];
      line.x += deltaX;
      line.y += deltaY;
    }

    lastMouseX = mouseX;
    lastMouseY = mouseY;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    drawLines();
  }
});

drawGrid();
drawLines();

在这个示例中，我们使用 `linePositions` 数组来存储网格线条的位置。在初始化时，我们将水平线条和垂直线条的位置都添加到了数组中。

当鼠标在 canvas 上按下时，我们将 `isDragging` 设置为 true，记录下当前鼠标的位置，然后在鼠标移动时计算出需要移动的线条的位置，并修改 `linePositions` 数组中对应的线条的位置。

在 `mousemove` 事件处理函数中，我们首先判断 `isDragging` 是否为 true，如果是，就计算出需要移动的线条的位置，然后使用 `ctx.clearRect` 清除画布，重新绘制网格和线条。

最后，我们使用 `getLineIndex` 函数来判断当前鼠标位置是否在网格线条的范围内。如果是，就返回线条的索引，否则返回 -1。这个函数的作用是用来确定需要移动的是哪条线条。