在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内容导出为图片链接供用户下载。这个简单的实现没有考虑性能优化，对于大型或复杂的应用，可能需要采用其他策略来优化状态管理和内存使用。