Canvas 是 HTML5 提供的一个绘图 API，可以用它来制作各种交互式的游戏和动画。在 Canvas 中监听键盘事件是实现用户交互的基础之一，因为它可以让用户通过按下不同的键盘键来触发不同的操作。本文将介绍如何使用 addEventListener 来在 Canvas 中监听键盘事件，包括绑定事件处理程序和获取按键信息。
绑定键盘事件处理程序
在 Canvas 中监听键盘事件的第一步是使用 addEventListener 方法来绑定键盘事件处理程序。addEventListener 是 DOM 中常用的方法，它可以将一个函数绑定到指定的事件上。在 Canvas 中，我们可以将该方法应用于文档对象或 Canvas 对象（也就是 canvas 元素），例如：
// 获取 Canvas 对象
var canvas = document.getElementById('my-canvas');
// 绑定 keydown 事件处理程序
canvas.addEventListener('keydown', function(event) {
// 处理键盘事件
});在上面的代码中，我们首先通过 document.getElementById 方法获取 Canvas 对象，然后使用 addEventListener 方法将一个匿名函数绑定到 keydown 事件上。这个匿名函数接受一个 Event 对象作为参数，可以在其中处理键盘事件相关的信息。
获取按键信息
在键盘事件处理程序中，我们通常需要获取按键的信息以便进行相应的操作。在 Canvas 中，可以通过 Event 对象的 keyCode 属性来获取按下的键盘键对应的 ASCII 码。例如：
-- -------------------- ---- -------
---------------------------------- --------------- -
-- -------------- --- --- -
-- ---------
- ---- -- -------------- --- --- -
-- ---------
- ---- -- -------------- --- --- -
-- ---------
- ---- -- -------------- --- --- -
-- ---------
-
---在上面的代码中，我们使用了 if/else 分支语句来判断按下的键盘键是否为四个方向键的 ASCII 码，并做出相应的处理。注意，这里使用了严格相等运算符（===）进行比较，以避免类型转换带来的问题。
除了 keyCode 属性外，Event 对象还有其他一些属性可以用于获取按键信息，例如 charCode、which 和 key 等，具体可以参考 MDN 文档。
示例代码
下面是一个完整的示例代码，实现了在 Canvas 上移动一个小方块，并在按下不同的方向键时让它改变方向和速度。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------
-------
------ -
------- --- ----- ------
-
--------
-------
------
------- -------------- ----------- ----------------------
--------
-- -- ------ --------
--- ------ - -------------------------------------
--- --- - ------------------------
-- -------
--- ------ - -
-- ------------ - - - ---
-- ------------- - - - ---
----- ---
------ --
--- --
--- -
--
-- ----------
---------------------------------- --------------- -
------ --------------- -
---- ---
-- ----------
--------- - --------------
--------- - --
------
---- ---
-- ----------
--------- - --
--------- - -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------