Canvas 键盘事件

作为 Canvas 交互大类的最后一章节，我们来学习下如何在 Canvas 中响应键盘事件

浏览器有 3 种按键事件 keydown，keypress 和 keyup，分别对应 onkeydown、onkeypress 和 onkeyup 3 个事件句柄

一个典型的按键会产生所有这三种事件，依次是

keydown  -->  keypress --> keyup

事件回调参数 e

三个键盘事件的使用方法都一模一样，我们就不介绍了，我们来讲讲这三个事件回调函数中的参数 (e)

c.addEventListener('mousedown', function(e){});

参数 e 封装了触发键盘事件时所有的参数和选项，其中有一个几个属性非常重要

属性	说明
e.keyCode	保存了按下了哪个键，IE 独有
e.which	保存了按下了哪个键, 非 IE 浏览器，比如 Chrome / Firefox / Opera
e.altKey	是否同时按下了 alt 键，默认为 false
e.ctrlKey	是否同时按下了 Ctrl 键，默认为 false
e.metaKey	是否按下了 Meta 键，就是那个微软图标键，默认为 false
e.shiftKey	是否同时按下了 Shift 键，默认为 false

为了获取用户按下哪个键，且要兼容 IE 浏览器，所以我们一般的使用方法如下

e = e || window.event;  
key = e.keyCode || e.which || e.charCode;

然后获取到的值 e.which 只是一个 ASCII 码，我们还要使用下面的方式获得实际按下的键

var which_key = String.fromCharCode(e.which);

字母和数字键的键码值(keyCode)

数字键盘上的键的键码值(keyCode)

功能键键码值(keyCode)

控制键键码值(keyCode)

多媒体键码值(keyCode)

我们使用 WASD 键来移动小球

<!DOCTYPE html>
<meta charset="utf-8">
</script>

你可以使用 WASD 四个按键移动小球

← Canvas 跟随鼠标/手指 Canvas ImageData 对象 →