canvas编写一个折线网格 ，鼠标可以选中折线图上的点并且可以拖动这个点 的位置，也可以用鼠标左键绘制一个新的折线

好的，这是一个比较复杂的问题，需要使用到canvas的基本绘图方法和事件监听方法。下面是一个简单的实现方式：

1. 首先，我们需要先创建一个canvas元素，并获取到它的上下文对象：

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

2. 然后，我们需要绘制一个折线网格。可以通过以下步骤实现：

1. 定义一个网格的大小，例如，每个小方格的宽度为20像素，高度为20像素。

2. 遍历整个canvas，绘制水平方向和垂直方向的线条。

3. 在绘制线条的过程中，可以通过设置线条的颜色和线宽来美化网格。

var gridSize = 20; // 网格的大小为20像素

// 绘制水平方向的线条
for (var y = 0; y < canvas.height; y += gridSize) {
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(canvas.width, y);
  ctx.strokeStyle = '#ddd'; // 线条颜色
  ctx.lineWidth = 1; // 线宽
  ctx.stroke();
}

// 绘制垂直方向的线条
for (var x = 0; x < canvas.width; x += gridSize) {
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, canvas.height);
  ctx.strokeStyle = '#ddd'; // 线条颜色
  ctx.lineWidth = 1; // 线宽
  ctx.stroke();
}

3. 接下来，我们需要通过事件监听来实现鼠标操作：

1. 监听鼠标的mousedown事件，当鼠标按下时，判断鼠标是否在某个点上，如果是，则记录下该点的位置和索引。

2. 监听鼠标的mousemove事件，当鼠标移动时，如果当前已经记录了点的位置和索引，则将该点的位置更新为鼠标的位置。

3. 监听鼠标的mouseup事件，当鼠标松开时，清除已记录的点的位置和索引。

var points = []; // 所有的点
var selectedPoint = null; // 当前选中的点

// 监听鼠标的mousedown事件
canvas.addEventListener('mousedown', function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    if (Math.abs(point.x - x) < 5 && Math.abs(point.y - y) < 5) {
      // 如果鼠标点中了某个点，则记录下该点的位置和索引
      selectedPoint = {
        index: i,
        x: point.x,
        y: point.y
      };
      break;
    }
  }
});

// 监听鼠标的mousemove事件
canvas.addEventListener('mousemove', function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  if (selectedPoint) {
    // 如果当前已经记录了点的位置和索引，则将该点的位置更新为鼠标的位置
    selectedPoint.x = x;
    selectedPoint.y = y;
  }
});

// 监听鼠标的mouseup事件
canvas.addEventListener('mouseup', function(e) {
  selectedPoint = null; // 清除已记录的点的位置和索引
});

4. 最后，我们需要实现用鼠标左键绘制一个新的折线的功能：

1. 监听鼠标的click事件，当鼠标左键单击时，记录下当前鼠标的位置。

2. 如果当前已经记录了一个点，则将该点和新记录的点连接起来，绘制一条线段。

3. 每次绘制完一条线段后，将新记录的点作为下一条线段的起点。

var newPoint = null; // 新记录的点

// 监听鼠标的click事件
canvas.addEventListener('click', function(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  if (!newPoint) {
    // 如果当前没有记录新的点，则将当前位置作为新的点
    newPoint = {
      x: x,
      y: y
    };
  } else {
    // 如果当前已经记录了一个点，则将该点和新记录的点连接起来，绘制一条线段
    ctx.beginPath();
    ctx.moveTo(newPoint.x, newPoint.y);
    ctx.lineTo(x, y);
    ctx.strokeStyle = '#f00'; // 线条颜色
    ctx.lineWidth = 2; // 线宽
    ctx.stroke();
    // 将新记录的点作为下一条线段的起点
    newPoint = {
      x: x,
      y: y
    };
  }
});

综上所述，以上就是一个简单的折线网格的实现方式，可以根据自己的需求进行适当的修改和优化。