canvas点击画线，并且可以移动和缩放

可以通过以下步骤来实现在 Canvas 上点击画线并可以移动和缩放的功能：

1. 定义一个数组用于保存所有画的线段，比如 `lines`；
2. 给 Canvas 添加 `mousedown` 事件监听器，当用户点击鼠标时，记录下鼠标的起始位置，并画一条从起始位置到起始位置的线段（这样可以让用户看到正在画线的过程）；
3. 给 Canvas 添加 `mousemove` 事件监听器，当用户拖动鼠标时，根据当前位置和起始位置画一条线段，同时清除 Canvas 上的所有线段并重新画出 `lines` 数组中保存的所有线段；
4. 给 Canvas 添加 `mouseup` 事件监听器，当用户松开鼠标时，将当前画的线段保存到 `lines` 数组中，并将起始位置和当前位置都重置为 `(0, 0)`；
5. 给 Canvas 添加 `wheel` 事件监听器，当用户滚动鼠标滚轮时，根据滚动的方向缩放 Canvas。

下面是一个示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lines = [];
let startX = 0, startY = 0, currX = 0, currY = 0;

// 画一条直线
function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

// 清除 Canvas 并重新绘制所有线段
function redrawLines() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  lines.forEach(line => drawLine(line[0], line[1], line[2], line[3]));
}

// 给 Canvas 添加鼠标事件监听器
canvas.addEventListener('mousedown', (e) => {
  startX = e.clientX - canvas.offsetLeft;
  startY = e.clientY - canvas.offsetTop;
  currX = startX;
  currY = startY;
  drawLine(startX, startY, currX, currY);
});

canvas.addEventListener('mousemove', (e) => {
  if (startX === 0 && startY === 0) {
    return;
  }
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;
  currX = x;
  currY = y;
  redrawLines();
  drawLine(startX, startY, currX, currY);
});

canvas.addEventListener('mouseup', () => {
  lines.push([startX, startY, currX, currY]);
  startX = 0;
  startY = 0;
  currX = 0;
  currY = 0;
});

canvas.addEventListener('wheel', (e) => {
  const delta = Math.sign(e.deltaY);
  const scaleFactor = delta > 0 ? 1.1 : 0.9;
  ctx.scale(scaleFactor, scaleFactor);
  redrawLines();
});

在这个示例中，我们定义了一个 `lines` 数组来保存所有画的线段；在 `mousedown` 事件监听器中记录下鼠标的起始位置并画出一条从起始位置到起始位置的线段；在 `mousemove` 事件监听器中根据当前位置和起始位置画一条线段，并清除 Canvas 并重新绘制所有线段；在 `mouseup` 事件监听器中将当前画的线段保存到 `lines` 数组中并重置起始位置和当前位置；在 `wheel` 事件监听器中根据滚轮的方向缩放 Canvas。

这个示例还比较简单，你可以根据自己的需求进行更改和扩展。