Javascript 如何创建ctrl+；画布中的z键盘事件？

我正在尝试像Ctrl+Z一样进行“撤消”操作

我制作了一个简单的画布绘制示例，以便更容易理解我想要的内容。当用户在不释放mouse1的情况下移动鼠标时，画布上将绘制一些内容。然后，当他们停止按下鼠标1时，绘图结束。Ctrl+Z快捷键将撤消这些图形

代码如下：

//var
const canvas=document.getElementById（'canvas'）；
const cC=canvas.getContext（'2d'）；
//是否写入触发器
var pressedQ=假；
//
函数getMousePosition（evt）{
var rect=canvas.getBoundingClientRect（）；
var root=document.documentElement；
var mouseX=evt.clientX-rect.left-root.scrollLeft；
var mouseY=evt.clientY-rect.top-root.scrollTop；
返回{
x:鼠标，
y:老鼠
};
}
函数writeCircle（posX、posY、大小、颜色）{
cC.fillStyle='黑色'；
cC.beginPath（）；
cC.arc（posX，posY，size，0，Math.PI*2，true）；
cC.fill（）；
}
函数铅笔（evt）{
如果（按Q==真）{
var mousePos=getMousePosition（evt）；
writeCircle（mousePos.x，mousePos.y，50）；
}
else{}
}
功能激活（文本模式，evt）{
按q=true；
console.log（'start'）；
}
函数停用（）{
按q=false；
console.log（'finish'）；
}
window.onload=函数（）{
cC.clearRect（0，0，canvas.width，canvas.height）；
canvas.addEventListener（'mousedown'，activate）；
canvas.addEventListener（“鼠标移动”，铅笔）；
canvas.addEventListener（'mouseup'，停用）；
}

---

您要查找的是。因为您在这里使用函数，所以只需要存储函数名及其参数。然后，您可以使用该数据稍后再次调用该函数。下面的示例并不完美，但它应该演示基本思想。（我试图避免2015年更新后添加的任何JavaScript语法）

var canvas=document.getElementById（'canvas'）；
var cC=canvas.getContext（'2d'）；
var pressedQ=假//是否写入触发器
var命令=[]；
var命令类型={
drawCircle：函数（posX、posY、大小、颜色）{
cC.fillStyle='黑色'；
cC.beginPath（）；
cC.arc（posX，posY，size，0，Math.PI*2，true）；
cC.fill（）；
}
};
函数execute（）{
var commandType=参数[0]；
var data=Array.prototype.slice.call（参数，1）；
如果（！commandTypes.hasOwnProperty（commandType））
抛出新错误（commandType+'不是真正的命令'）；
commandTypes[commandType].apply（空，数据）；
}
函数pushAndExecute（）{
命令。推送（参数）；
apply（null，参数）；
}
函数getMousePosition（evt）{
var rect=canvas.getBoundingClientRect（）；
var root=document.documentElement；
返回{
x:evt.offsetX-rect.left-root.scrollLeft，
y:evt.offsetY-rect.top-root.scrollTop
};
}
函数铅笔（evt）{
如果（！pressedQ）返回；
var mousePos=getMousePosition（evt）；
pushAndExecute（'drawCircle'，mousePos.x，mousePos.y，50）；
}
功能激活（evt）{
按q=true；
//console.log（'start'）；
铅笔（evt）；
}
函数停用（）{
按q=false；
//console.log（'finish'）；
}
功能手柄键（evt）{
如果（evt.ctrlKey&&evt.key=='z'）{
//console.log（'undo'）；
//从列表中删除最近的命令
命令。拼接（-1,1）；
//透明帆布
cC.clearRect（0，0，canvas.width，canvas.height）；
//重新播放所有命令（从头开始重新绘制画布）
commands.forEach（函数（命令）{
execute.apply（null，command）；
});
}
}
window.onload=函数（）{
cC.clearRect（0，0，canvas.width，canvas.height）；
canvas.addEventListener（'mousedown'，activate）；
canvas.addEventListener（“鼠标移动”，铅笔）；
canvas.addEventListener（'mouseup'，停用）；
window.addEventListener（'keydown'，handleKeys）；
}

---

太棒了！这正是我想要的，工作完美！谢谢！如果有办法给你更多的声誉，我给！哈哈，很乐意帮忙！