JS canvas 中的撤销，重做，保存

在JavaScript中使用Canvas实现撤销、重做、保存功能，需要在每次绘制操作后将状态保存到栈中。以下是一个简单的示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
 
const undoStack = [];
const redoStack = [];
 
function saveState() {
  // 将当前状态（图像数据）推入撤销栈
  const state = canvas.toDataURL();
  undoStack.push(state);
  redoStack.length = 0; // 重做栈清空
}
 
function undo() {
  if (undoStack.length > 0) {
    // 取出最后一个状态
    const state = undoStack.pop();
    redoStack.push(state); // 加入重做栈
    // 恢复状态
    const img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
    };
    img.src = state;
  }
}
 
function redo() {
  if (redoStack.length > 0) {
    // 取出最后一个状态
    const state = redoStack.pop();
    undoStack.push(state); // 加入撤销栈
    // 恢复状态
    const img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
    };
    img.src = state;
  }
}
 
function save() {
  // 将当前canvas状态保存为图片下载
  const link = document.createElement('a');
  link.href = canvas.toDataURL();
  link.download = 'canvas.png';
  link.click();
}
 
// 示例：绘制操作后保存状态
function drawCircle(x, y, radius, color) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = color;
  ctx.fill();
  saveState(); // 绘制完成后保存状态
}
 
// 用户事件处理（如鼠标点击、键盘输入等）时调用相应的函数
// 例如：
// canvas.onclick = (e) => {
//   drawCircle(e.clientX, e.clientY, 10, 'red');
// };

在这个示例中，每次绘制操作后调用saveState()函数将当前canvas状态保存到undoStack。用户执行撤销操作时，从undoStack弹出最后一个状态并加入到redoStack，然后将状态加载到canvas上。重做操作类似。保存操作则是将canvas内容导出为图片链接供用户下载。这个简单的实现没有考虑性能优化，对于大型或复杂的应用，可能需要采用其他策略来优化状态管理和内存使用。