如何利用 JavaScript 实现一个支持撤销操作的绘图应用？

答案：通过在每次绘制结束后保存图像快照到历史栈，并在撤销时还原上一步状态，可实现高效绘图撤销功能。使用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）

基本上就这些。通过合理管理绘图状态的历史快照，就能轻松实现稳定可靠的撤销功能。关键在于把握“何时保存”和“如何还原”。