Javascript 仅当按下键盘时，画布绘制矩形

我用鼠标在画布上画矩形。但是，我只想在键盘上按下键

d

时激活鼠标操作来绘制矩形

如果我使用

if (event.ctrlKey) {
 //draw rectangles
} 

我可以通过在键盘上按住ctrlKey键来画画。 然而，如果我使用

if (e.which == 88) {
 //draw rectangles
}

它不起作用。我无法将键盘按键事件绑定到画布上的鼠标事件。我知道canvas元素没有onKeyPress事件，正如在一些博客中建议的那样，我尝试了以下代码，但不起作用。有人能帮我开始吗

我有许多事件需要在画布上绑定键盘按下事件

平行四边形
var，上下文；
var=false；
变异定位；
var dragStartLocation；
var dragStopLocation；
var dragThirdLocation；
var快照；
var-coords=[]；
var pointsNum=0；
变量d={
x:0,，
y:0
};
//获取鼠标点击坐标
函数getCanvasCoordinates（事件）
{
var x=event.clientX-canvas.getBoundingClientRect（）.left；
var y=event.clientY-canvas.getBoundingClientRect（）.top；
返回{
x:x，
y:y
};
}
//保存画布的原始状态
函数takeSnapShot（）
{
snapshot=context.getImageData（0，0，canvas.width，canvas.height）；
}
//恢复画布的原始状态
函数restoreSnapShot（）
{
putImageData（快照，0,0）；
}
//用鼠标单击绘制一个点
功能提取点（位置）
{
context.beginPath（）；
弧（position.x，position.y，5.5,0，Math.PI*2，false）；
stroke（）；
}
//在鼠标移动时画一条线
功能抽绳（起点、终点）
{
context.beginPath（）；
moveTo（start.x，start.y）；
lineTo（end.x，end.y）；
stroke（）；
}
//通过第一次鼠标单击启动事件
函数dragStart（事件）
{
拖动=真；
dragStartLocation=getCanvasCoordinates（事件）；
coords['imageClicked']=localStorage.getItem（'clickedImage'）；
控制台日志（coords）；
var brandNode=localStorage.getItem（'brandNode'）；
var locationNode=localStorage.getItem（'locationNode'）；
绘图点（dragStartLocation）；
pointsNum++；
takeSnapShot（）；
如果（pointsNum==1）startLocation=dragStartLocation；
}
//从第一次单击开始沿鼠标移动绘制一条线
函数拖动（事件）
{
var位置；
if（快照和点SNUM和点SNUM<3）
{
恢复napshot（）；
位置=获取画布坐标（事件）；
拉线（拉线起点位置、位置）；
支点（位置）；
如果（pointsNum==2）drawFourthCoord（位置）
}
}
//停止鼠标移动并绘制线条。
功能dragStop（事件）
{
拖动=假；
恢复napshot（）；
var位置=获取画布坐标（事件）；
dragStopLocation=位置；
绘图点（dragStopLocation）；
pointsNum++；
抽绳（dragStartLocation，dragStopLocation）；
takeSnapShot（）；
d={
x:dragStartLocation.x-dragStopLocation.x，
y:dragStartLocation.y-dragStopLocation.y
};
dragStartLocation=位置；
控制台日志（dragStartLocation）；
如果（pointsNum>3）pointsNum=0；
}
//画第四个坐标
功能图第四坐标（位置）
{
var p={
x：位置x+d.x，
y:位置。y+d.y
};
抽绳（位置，p）；
支点（p）；
抽绳（p）；
}
/*
此代码有效…但不绑定到keyCode x
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
context.lineCap=“round”；
context.lineWidth=3；
context.strokeStyle='#f4d03f'；
canvas.addEventListener（'mousedown'，dragStart，false）；
canvas.addEventListener（'mousemove'，drag，false）；
canvas.addEventListener（'mouseup'，dragStop，false）；
}
addEventListener（'load'，init，false）；
*/
var canvaskey=document.getElementById（'canvas'）；
canvaskey.addEventListener（'keydown'，doKeyDown，true）；
功能doKeyDown（e）
{
如果（e.which==88）
{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
context.lineCap=“round”；
context.lineWidth=3；
context.strokeStyle='#f4d03f'；
canvas.addEventListener（'mousedown'，dragStart，false）；
canvas.addEventListener（'mousemove'，drag，false）；
canvas.addEventListener（'mouseup'，dragStop，false）；
}
}

只需在绘图函数有权访问的范围内保存一个信号量变量即可

在按下所需键时，将其设置为

true

，在按下键时设置为

false

在draw函数中，检查信号量是否设置为

true

，否则立即返回

//我们的按键信号量
var d_down=错误；
功能doKeyDown（e）
{
如果（e.key==“d”）
{
d_down=真；
}
}
函数doKeyUp（e）
{
如果（e.key==“d”）
{
d_down=假；
}
}
var，上下文；
var=false；
变异定位；
var dragStartLocation；
var dragStopLocation；
var dragThirdLocation；
var快照；
var-coords=[]；
var pointsNum=0；
变量d={
x:0,，
y:0
};
//获取鼠标点击坐标
函数getCanvasCoordinates（事件）
{
var x=event.clientX-canvas.getBoundingClientRect（）.left；
var y=event.clientY-canvas.getBoundingClientRect（）.top；
返回{
x:x，
y:y
};
}
//保存画布的原始状态
函数takeSnapShot（）
{
snapshot=context.getImageData（0，0，canvas.width，canvas.height）；
}
//恢复画布的原始状态
函数restoreSnapShot（）
{
putImageData（快照，0,0）；
}
//用鼠标单击绘制一个点
功能提取点（位置）
{
context.beginPath（）；
弧（position.x，position.y，5.5,0，Math.PI*2，false）；
stroke（）；
}
//在鼠标移动时画一条线
功能抽绳（起点、终点）
{
context.beginPath（）；
moveTo（start.x，start.y）；
孔蒂