Canvas 键盘事件

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

浏览器有 3 种按键事件 keydownkeypresskeyup,分别对应 onkeydownonkeypressonkeyup 3 个事件句柄

事件 描述
onkeydown 当按下按键时运行脚本
onkeypress 当按下并松开按键时运行脚本
onkeyup 当松开按键时运行脚本

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

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);

e.which 与 ASCII 对照表

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

按键 键码 按键 键码 按键 键码 按键 键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

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

按键 键码 按键 键码
0 96 8 104
1 97 9 105
2 98 * 106
3 99 + 107
4 100 Enter 108
5 101 - 109
6 102 . 110
7 103 / 111

功能键键码值(keyCode)

按键 键码 按键 键码
F1 112 F7 118
F2 113 F8 119
F3 114 F9 120
F4 115 F10 121
F5 116 F11 122
F6 117 F12 123

控制键键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 39 -_ 189
Tab 9 Spacebar 32 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 37 =+ 187 ]} 221
Cape Lock 20 38 ,< 188 '" 222

多媒体键码值(keyCode)

按键 键码
音量加 175
音量减 174
停止 179
静音 173
浏览器 172
邮件 180
搜索 170
收藏 171

范例

我们使用 WASD 键来移动小球

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

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

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.