如何利用 JavaScript 实现一个支持撤销操作的绘图应用？-js教程-PHP中文网

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

幻影之瞳

发布： 2025-10-03 22:16:01

原创

370人浏览过

答案：通过在每次绘制结束后保存图像快照到历史栈，并在撤销时还原上一步状态，可实现高效绘图撤销功能。使用Canvas的getImageData和putImageData方法进行状态存储与恢复，结合鼠标事件监听完成绘图流程，限制历史栈大小以优化性能，确保用户体验流畅。

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

实现一个支持撤销操作的绘图应用，关键是记录用户的每一步绘制动作，并在需要时回退到之前的状态。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 提高性能：

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

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);