我试图在canvas中实现撤消选项

Question

我已经实现了一个画布，我们可以使用鼠标事件绘制形状。为此，我想在画布上添加一个撤消选项。 请你帮我解决这个问题。 我只想在javascript中使用代码。

谢谢。

Answer 1

您可以通过以下手动步骤来实现您的要求。

1. 捕获最后绘制的鼠标事件。
2. 在身体负荷上注册关键事件。你可以获得Ctrl + Z的KeyCode。如果按此按钮，则从画布中删除最后绘制的鼠标事件并重新绘制。

如果要支持多个撤消事件，还可以列出上次绘制的鼠标事件列表。 反向逻辑也可以应用于重做。

Answer 2

有很多方法可以实现这种类型的功能，有些方法比其他功能更多。我能想到的最简单的方法是在下一步发生之前保存画布缓冲区，并在发生撤消时恢复到该缓冲区。显然，这会让你只有一次撤销，但这可能只是你想要实现的目标。看看这个小提琴，看看我在说什么：http://jsfiddle.net/7Nbea/

此方法的一些关键部分。

创建一个与画布匹配的缓冲区。

var buffer = document.createElement('canvas');
buffer.height = canvas.height;
buffer.width = canvas.width;
var bufferCTX = buffer.getContext('2d');

将当前画布保存到缓冲区。

var penDown= function(event){
    bufferCTX.drawImage(canvas,0,0);
    ...
}

恢复到缓冲区......

undo.onclick = function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(buffer,0,0);
}