答案：通过在每次绘制结束后保存图像快照到历史栈，并在撤销时还原上一步状态，可实现高效绘图撤销功能。使用Canvas的getImageData和putImageData方法进行状态存储与恢复，结合鼠标事件监听完成绘图流程，限制历史栈大小以优化性能，确保用户体验流畅。
实现一个支持撤销操作的绘图应用，关键是记录用户的每一步绘制动作，并在需要时回退到之前的状态。JavaScript 结合 Canvas 可以很好地完成这个任务。核心思路是：把每次绘制操作保存到历史栈中，撤销时从栈中弹出上一步。
1. 使用画布（Canvas）进行绘图
先创建一个 canvas> 元素用于绘图，并通过 JavaScript 获取上下文：
const canvas = document.getElementById('drawingCanvas');const ctx = canvas.getContext('2d');
let isDrawing = false;
监听鼠标事件来实现基本绘图：
- mousedown：开始绘制，标记 isDrawing = true
- mousemove：如果正在绘制，则画线
- mouseup / mouseleave：结束绘制，isDrawing = false
示例代码片段：
立即学习“Java免费学习笔记（深入）”；
canvas.addEventListener('mousedown', (e) => {isDrawing = true;
const { offsetX, offsetY } = e;
ctx.beginPath();
ctx.moveTo(offsetX, offsetY);
}); canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const { offsetX, offsetY } = e;
ctx.lineTo(offsetX, offsetY);
ctx.stroke();
}); canvas.addEventListener('mouseup', () => {
isDrawing = false;
ctx.closePath();
saveState(); // 绘制结束后保存状态
});
2. 实现撤销功能的核心：历史栈
不能每次操作都保存整个 canvas 图像（性能差），而是应在每次完成一笔（如一次鼠标按下到抬起）后，将当前 canvas 的图像快照存入历史数组。
使用 canvas.toDataURL() 或 getImageData 来保存状态。推荐使用 getImageData 提高性能：
const history = [];const MAX_UNDO_STEPS = 20; // 限制最大撤销步数 function saveState() {
if (history.length >= MAX_UNDO_STEPS) {
history.shift(); // 移除最老的记录
}
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
history.push(imageData);
}
撤销操作时，从栈中取出上一步并还原：
function undo() {if (history.length === 0) return;
const previousState = history.pop();
ctx.putImageData(previousState, 0, 0);
}
绑定按钮事件：
document.getElementById('undoBtn').addEventListener('click', undo);3. 优化建议与注意事项
为了提升用户体验和性能，可以考虑以下几点：
- 只在一笔完成（mouseup）后调用 saveState()，避免频繁保存导致卡顿
- 限制历史栈大小，防止内存占用过高
- 若支持重做（redo），可额外维护一个重做栈，在撤销时把状态移过去
- 使用离屏 canvas 预渲染复杂图形，提高响应速度
- 移动端需添加 touch 事件支持（touchstart, touchmove, touchend）
基本上就这些。通过合理管理绘图状态的历史快照，就能轻松实现稳定可靠的撤销功能。关键在于把握“何时保存”和“如何还原”。
