1. 概述
在前端开发中，我们经常需要监听用户的键盘操作，以便正确地响应用户的行为。在使用 canvas 绘制图形时，我们同样需要监听键盘事件，以便于根据用户的操作来改变绘图的状态。下面我们将介绍 canvas 键盘事件。
2. 键盘事件类型
canvas 中支持多种键盘事件类型，主要包括：
2.1 keydown
用户按下一个键时触发的事件。该事件的事件对象可以获取到按下的键的键码、键名等信息。
canvas.addEventListener('keydown', function(event) {
console.log(event.keyCode);
console.log(event.key);
});
上面的代码中，我们给 canvas 添加了一个 keydown 事件监听器。当用户按下一个键时，控制台会输出按键的键码和键名。
2.2 keyup
用户松开一个键时触发的事件。与 keydown 事件类似，该事件的事件对象同样可以获取到松开的键的信息。
canvas.addEventListener('keyup', function(event) {
console.log(event.keyCode);
console.log(event.key);
});
上面的代码中，我们给 canvas 添加了一个 keyup 事件监听器。当用户松开一个键时，控制台会输出松开键的键码和键名。
3. 键盘事件对象
当键盘事件触发时，事件处理函数会接收到一个事件对象(event)，该事件对象包含了许多属性和方法，包括：
event.key: 按下/松开的键对应的字符。
event.keyCode: 按下/松开的键对应的ASCII码或者虚拟键码。
event.ctrlKey: 表示是否按下了 Ctrl 键。
event.shiftKey: 表示是否按下了 Shift 键。
event.altKey: 表示是否按下了 Alt 键。
event.preventDefault(): 阻止默认行为。
event.stopPropagation(): 阻止事件冒泡。
通过键盘事件对象，我们可以获取到用户的键盘操作信息，从而对 canvas 进行相应的操作和处理。
4. 键盘状态的保存
有时候我们需要在按下键的同时保持键的状态，例如按下 Ctrl 键时，可以使之后的键盘操作都有某种特殊效果。这时候我们就需要记录键盘的状态，可以通过一个数组来保存键的状态，例如：
var keys = [];
canvas.addEventListener('keydown', function(event) {
keys[event.keyCode] = true;
});
canvas.addEventListener('keyup', function(event) {
keys[event.keyCode] = false;
});
上面的代码中，我们定义了一个数组 keys，该数组保存了键盘的状态。当按下一个键时，我们将对应的键码的数组元素设置为 true，松开键时将其设置为 false。这样，我们就可以记录每个键的状态，方便后续的操作。
5. 实例：通过键盘控制小球运动
接下来，我们将通过一个实例来演示如何使用 canvas 键盘事件。本实例中，我们将通过键盘控制小球的运动方向。
首先，我们需要定义小球的初始状态：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var dx = 2;
var dy = -2;
var ballRadius = 10;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
}
setInterval(draw, 10);
上面的代码中，我们定义了球的初始状态：位置在屏幕中央，半径为10，每帧位移2 pixels。
接下来，我们需要监听用户的键盘操作：
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
document.addEventListener('keydown', function(event) {
if (event.keyCode === 39) {
rightPressed = true;
} else if (event.keyCode === 37) {
leftPressed = true;
} else if (event.keyCode === 38) {
upPressed = true;
} else if (event.keyCode === 40) {
downPressed = true;
}
});
document.addEventListener('keyup', function(event) {
if (event.keyCode === 39) {
rightPressed = false;
} else if (event.keyCode === 37) {
leftPressed = false;
} else if (event.keyCode === 38) {
upPressed = false;
} else if (event.keyCode === 40) {
downPressed = false;
}
});
上面的代码中，我们定义了四个变量，分别保存了方向键的状态。当用户按下方向键时，我们将对应的状态变量设置为 true；当用户松开方向键时，将其设置为 false。这样，我们就可以获取到用户的键盘操作信息。
最后，我们需要根据用户的操作来改变小球的状态：
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if (rightPressed && x < canvas.width - ballRadius) {
x += dx;
} else if (leftPressed && x > ballRadius) {
x -= dx;
} else if (upPressed && y > ballRadius) {
y -= dy;
} else if (downPressed && y < canvas.height - ballRadius) {
y += dy;
}
}
setInterval(draw, 10);
上面的代码中，我们在 draw 函数中，根据用户的操作来改变小球的位置。如果用户按下右箭头键，则将 x 增加 dx；如果按下左箭头键，则将 x 减少 dx；如果按下上箭头键，则将 y 减少 dy；如果按下下箭头键，则将 y 增加 dy。这样，小球的运动方向就可以被键盘控制了。
6. 总结
canvas 键盘事件可以监听用户的键盘操作，根据用户操作来执行相应的操作。在实际开发中，我们可以根据键盘事件的类型和事件对象中的信息，来实现丰富的交互体验效果。