uniapp小程序使用canvas对图片批注实现撤销和恢复上一步

要实现撤销和恢复上一步的功能，需要在canvas中保存每一步的状态，并能够在需要的时候回退到上一步或恢复到下一步。

具体实现步骤如下：

1. 在canvas中定义一个数组，用于保存每一步的状态，可以使用JSON序列化和反序列化来实现对象的深拷贝。

2. 对于每一次的绘制操作，都将当前的canvas状态保存到数组中。

3. 当需要撤销上一步时，将数组中的最后一个状态弹出，并将该状态绘制到canvas上。

4. 当需要恢复到下一步时，将数组中的下一个状态绘制到canvas上。

代码示例：

// 定义一个数组，用于保存每一步的状态
let canvasHistory = [];

// 保存当前的canvas状态到数组中
function saveCanvasState() {
  let state = JSON.stringify(canvas.toDataURL());
  canvasHistory.push(state);
}

// 撤销上一步
function undoCanvas() {
  if (canvasHistory.length > 0) {
    let lastState = canvasHistory.pop();
    let img = new Image();
    img.src = lastState;
    img.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
    }
  }
}

// 恢复下一步
function redoCanvas() {
  // 待实现
}

// 监听canvas绘制事件，保存当前状态
canvas.onmousemove = function(e) {
  if (isDrawing) {
    let x = e.clientX - canvas.offsetLeft;
    let y = e.clientY - canvas.offsetTop;
    drawLine(prevX, prevY, x, y);
    saveCanvasState();
    prevX = x;
    prevY = y;
  }
}