canvas键盘事件有哪些

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 键盘事件可以监听用户的键盘操作，根据用户操作来执行相应的操作。在实际开发中，我们可以根据键盘事件的类型和事件对象中的信息，来实现丰富的交互体验效果。