HTML5的Canvas中文帮助手册或参考手册

HTML5的Canvas中文帮助手册或参考手册

canvas.getContext("2d") 是CanvasRenderingContext2D 对象
CanvasRenderingContext2D 对象的属性
canvas 属性

这个环境可以绘制于其上的 Canvas 元素。
fillStyle 属性

用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时,它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象,通过使用指定的渐变或模式来完成填充。
globalAlpha 属性

指定在画布上绘制的内容的不透明度。这个值的范围在 0.0(完全透明)和 1.0(完全不透明)之间。默认值为 1.0。
globalCompositeOperation 属性

指定颜色如何与画布上已有的颜色组合(合成)。如需更多细节,请参阅 globalCompositeOperation 属性参考页。
lineCap 属性

指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。如需更多细节,请参阅 lineCap 属性参考页。
lineJoin 属性

指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。如需更多细节,请参阅 lineJoin 属性参考页。
lineWidth 属性

指定了画笔(绘制线条)操作的线条宽度。默认值是 1.0,并且这个属性必须大于 0.0。较宽的线条在路径上居中,每边有线条宽的一半。
miterLimit 属性

当 lineJoin 属性为 "miter" 的时候,这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节,请参阅 miterLimit 属性参考页。
shadowBlur 属性

指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowColor 属性

把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串,并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
shadowOffsetX, shadowOffsetY 属性

指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。
strokeStyle 属性

指定了用于画笔(绘制)路径的颜色、模式和渐变。这个属性可能是一个字符串,或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串,它被解析为一个 CSS 颜色值,并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象,画笔使用这个渐变或模式来实现。

CanvasRenderingContext2D 对象的方法

方法 描述
arc() 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
arcTo() 使用目标点和一个半径,为当前的子路径添加一条弧线。
beginPath() 开始一个画布中的一条新路径(或者子路径的一个集合)。
bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。
clearRect() 在一个画布的一个矩形区域中清除掉像素。
clip() 使用当前路径作为连续绘制操作的剪切区域。
closePath() 如果当前子路径是打开的,就关闭它。
createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。
createPattern() 返回代表贴图图像的一个 CanvasPattern 对象。
createRadialGradient() 返回代表放射颜色渐变的一个 CanvasGradient 对象。
drawImage() 绘制一幅图像。
fill() 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
fillRect() 绘制或填充一个矩形。
lineTo() 为当前的子路径添加一条直线线段。
moveTo() 设置当前位置并开始一条新的子路径。
quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。
rect() 为当前路径添加一条矩形子路径。
restore() 为画布重置为最近保存的图像状态。
rotate() 旋转画布。
save() 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
scale() 标注画布的用户坐标系统。
stroke() 沿着当前路径绘制或画一条直线。
strokeRect() 绘制(但不填充)一个矩形。
translate() 转换画布的用户坐标系统。

arc()

方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。
语法

arc(x, y, radius, startAngle, endAngle, counterclockwise)

参数

参数 描述
x, y 描述弧的圆形的圆心的坐标。
radius 描述弧的圆形的半径。
startAngle, endAngle

沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

沿着 X 轴正半轴的三点钟方向的角度为 0,角度沿着逆时针方向而增加。
counterclockwise 弧沿着圆周的逆时针方向(TRUE)还是顺时针方向(FALSE)遍历。
描述

这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来,它沿着圆周,在子路径的起始点和结束点之间添加弧。

最后一个 counterclockwise 参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点。

arcTo()

方法使用使用切点和一个半径,来为当前子路径添加一条圆弧。
语法

arc(x1, y1, x2, y2, radius)

参数

参数 描述
x1, y1 点 P1 的坐标。
x2, y2 点 P2 的坐标。
radius 定义圆弧的圆的半径。
描述

这个方法为当前的子路径添加了一条圆弧,但是,它所描述的这条圆弧和 arc() 方法所描述的圆弧大不相同。添加给路径的圆弧是具有指定 radius 的圆的一部分。该圆弧有一个点与当前位置到 P1 的线段相切,还有一个点和从 P1 到 P2 的线段相切。这两个切点就是圆弧的起点和终点,圆弧绘制的方向就是连接这两个点的最短圆弧的方向。

在很多常见的应用中,圆弧开始于当前位置而结束于 P2,但情况并不总是这样。如果当前的位置和圆弧的起点不同,这个方法添加了一条从当前位置到圆弧起点的直线。这个方法总是将当前位置设置为圆弧的终点。
实例

可以用下面的代码绘制一个矩形的右上角(圆角):

c.moveTo(10,10); //在左上方开始c.lineTo(90,10); //到达圆角开始点的水平线c.arcTo(100,10,100,20,10); //圆角c.lineTo(100,100); //到达右下方的垂直线

beginPath()

方法在一个画布中开始子路径的一个新的集合。
语法

beginPath()

描述

beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。

当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。

bezierCurveTo()

方法在一个画布中开始子路径的一个新的集合。
语法

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

参数
参数 描述
cpX1, cpY1 和曲线的开始点(当前位置)相关联的控制点的坐标。
cpX2, cpY2 和曲线的结束点相关联的控制点的坐标。
x, y 曲线的结束点的坐标。
描述

bezierCurveTo() 为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点,而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候,当前的位置为 (x, y)。

clearRect()

方法删除一个画布的矩形区域。
语法

clearRect(x, y, width, height)

参数
参数 描述
x, y 矩形的左上角的坐标。
width, height 矩形的尺寸。
描述

clearRect() 方法擦除了指定的矩形,并且用一个透明的颜色填充它。

clip()

方法设置一个画布的剪切路径。
语法

clip()

描述

clip() 方法用当前剪切路径来剪切当前路径,然后使用剪切后的路径作为新的剪切路径。注意,没有方法来扩大剪切路径。如果想要一个临时的剪切路径,应该先调用 save() 以便使用 restore() 恢复最初的剪切路径。一个画布的默认剪切路径就是画布的矩形自身。

closePath()

方法关闭一条打开的子路径。
语法

closePath()

描述

如果画布的子路径是打开的,closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。

如果子路径已经闭合了,这个方法不做任何事情。

一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用 moveTo() 开始一条新的子路径。
提示和注释

注释:不需要在勾勒或填充一条路径之前调用 closePath()。当填充的时候(并且当你调用 clip() 的时候),路径是隐式闭合的。

createLinearGradient()

方法创建一条线性颜色渐变。
语法

createLinearGradient(xStart, yStart, xEnd, yEnd)

参数

参数 描述
xStart, yStart 渐变的起始点的坐标。
xEnd, yEnd 渐变的结束点的坐标。
返回值

表示一个线性颜色渐变的一个 CanvasGradient 对象。
描述

这个方法创建并返回了一个新的 CanvasGradient 对象,它在指定的起始点和结束点之间线性地内插颜色值。注意,这个方法并没有为渐变指定任何颜色。使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或填充区域,只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

createPattern()

方法为贴图图像创建一个模式。
语法

createPattern(image, repetitionStyle)

参数
参数 描述
image

需要贴图的图像。

这个参数通常是一个 Image 对象,但是也可以使用一个 Canvas 元素。
repetitionStyle 说明图像如何贴图。可能的值如下所示:

"repeat" – 在各个方向上都对图像贴图。默认值。
"repeat-x" – 只在 X 方向上贴图。
"repeat-y" – 只在 Y 方向上贴图。
"no-repeat" – 不贴图,只使用它一次。

返回值

表示模式的一个 CanvasPattern 对象。
描述

createPattern() 方法创建并返回一个 CanvasPattern 对象,该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域,可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。

createRadialGradient()

方法创建一条放射颜色渐变。
语法

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数

参数 描述
xStart, yStart 开始圆的圆心的坐标。
radiusStart 开始圆的直径。
xEnd, yEnd 结束圆的圆心的坐标。
radiusEnd 结束圆的直径。
返回值

表示一个放射性颜色渐变的一个 CanvasGradient 对象。
描述

这个方法创建并返回了一个新的 CanvasGradient 对象,该对象在两个指定圆的圆周之间放射性地插值颜色。注意,这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域,只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
放射性渐变的绘制方法

使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色,在两个位置之间的圆上插入颜色值(红色、绿色、蓝色和 alpha)。

drawImage()

方法绘制一幅图像。
语法

drawImage(image, x, y)drawImage(image, x, y, width, height)drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

参数

参数 描述
image

所要绘制的图像。

这必须是表示 标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素。
x, y 要绘制的图像的左上角的位置。
width, height 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
sourceX, sourceY 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight 图像所要绘制区域的大小,用图像像素表示。
destX, destY 所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight 图像区域所要绘制的画布大小。
描述

drawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布,将其放置到指定点的左上角,并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布,但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的,它允许您指定图像的任何矩形区域并复制它,对画布中的任何位置都可进行任何的缩放。

传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素。一个 Image 对象能够表示文档中的一个 标记或者使用 Image() 构造函数所创建的一个屏幕外图像。

fill()

方法填充路径。
语法

fill()

描述

fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。这一路径的每一条子路径都单独填充。任何未闭合的子路径都被填充,就好像已经对他么调用了 closePath() 方法一样(但是,注意,实际上没有这么让子路径成为闭合的)。

画布使用“非零匝数规则”来确定哪个点在路径的内部,而哪个点在路径的外部。这一规定的细节超出了本参考页的范围,但是,它们通常只和那些与自身相交的复杂路径相交。

填充一条路径并不会清除该路径。你可以在调用 fill() 之后再次调用 stroke(),而不需要重新定义该路径。

fillRect()

方法填充一个矩形。
语法

fillRect(x, y, weight, height)

参数

参数 描述
x, y 矩形的左上角的坐标。
weight, height 矩形的大小。
描述

fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。

fillRect() 方法的当前实现还清除了路径,就好像 beginPath() 已经调用了。这一令人惊讶的行为可能不会标准化,因此不应该指望它。

lineTo()

方法为当前子路径添加一条直线。
语法

lineTo(x, y)

参数

参数 描述
x, y 直线的终点的坐标。
描述

lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始,到 (x, y) 结束。当方法返回时,当前点是 (x,y)。

moveTo()

方法设置当前位置并开始一条新的子路径。
语法

moveTo(x, y)

参数

参数 描述
x, y 新的当前点的坐标。
描述

moveTo() 方法将当前位置设置为 (x, y) 并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点,那么从路径中删除该子路径。

quadraticCurveTo()

方法为当前路径添加一条贝塞尔曲线。
语法

quadraticCurveTo(cpX, cpY, x, y)

参数

参数 描述
cpX, cpY 控制点的坐标。
x, y 曲线终点的坐标。
描述

quadraticCurveTo() 方法为当前的子路径添加一条贝塞尔曲线。这条曲线从当前点开始,到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状(贝塞尔曲线的数学原理超过了本参考页的范围)。

当 quadraticCurveTo() 方法返回时,当前位置是 (x,y)。

rect()

方法为当前路径添加一条矩形子路径。
语法

quadraticCurveTo(x, y, width, height)

参数

参数 描述
x, y 矩形的左上角的坐标。
width, height 矩形的大小。
描述

rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。

当 rect() 方法返回时,当前位置是 (0,0)。

restore()

方法将绘图状态置为保存值。
语法

restore()

描述

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

请参阅 save() 方法了解更多信息。

rotate()

方法旋转画布的坐标系统。
语法

rotate(angle)

参数

参数 描述
angle 旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。
描述

rotate() 方法通过指定一个角度,改变了画布坐标和 Web 浏览器中的 元素的像素之间的映射,使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 元素本身。注意,这个角度是用弧度指定的。

提示:如需把角度转换为弧度,请乘以 Math.PI 并除以 180。

save()

方法保存当前图像状态的一份拷贝。
语法

save()

描述

save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态,然后,通过调用 restore() 来恢复以前的值。

一个画布的图形状态包含了 CanvasRenderingContext2D 对象的所有属性(除了只读的画布属性以外)。它还包含了一个变换矩阵,该矩阵是调用 rotate()、scale() 和 translate() 的结果。另外,它包含了剪切路径,该路径通过 clip() 方法指定。可是要注意,当前路径和当前位置并非图形状态的一部分,并且不会由这个方法保存。

scale()

方法标注画布的用户坐标系统。
语法

scale(sx, sy)

参数

参数 描述
sx, sy 水平和垂直的缩放因子。
描述

scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如,传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍,而高度变为原来的 1/2。指定一个负的 sx 值,会导致 X 坐标沿 Y 轴对折,而指定一个负的 sy 会导致 Y 坐标沿着 X 轴对折。

stroke()

方法绘制当前路径。
语法

stroke()

描述

stroke() 方法绘制当前路径的边框。路径定义的几何线条产生了,但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。

术语“勾勒”,指的是钢笔或笔刷的画笔。它意味着“画……轮廓”。和 stroke() 方法相对的是 fill(),该方法会填充路径的内部区域而不是勾勒出路径的边框。

strokeRect()

方法用于在单选按钮上模拟一次鼠标点击:
语法

strokeRect(x, y, width, height)

描述

该方法按照指定的位置和大小绘制一个矩形的边框(但并不填充矩形的内部)。线条颜色和线条宽度由 strokeStyle 和 lineWidth 属性指定。矩形边角的形状由 lineJoin 属性指定。

strokeRect() 的当前实现会清晰化路径,就好像 已经调用过了。这一令人吃惊的行为可能不会标准化,所以不能指望它。

translate()

方法转换画布的用户坐标系统。
语法

translate(dx, dy)

参数

参数 描述
dx, dy 转换的量的 X 和 Y 大小。
描述

translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。

例子:https://developer.mozilla.org/cn/Canvas_tutorial/Basic_animations

javascript keycode大全

[收藏]javascript keycode大全
keycode 8 = BackSpace BackSpace
keycode 9 = Tab Tab
keycode 12 = Clear
keycode 13 = Enter
keycode 16 = Shift_L
keycode 17 = Control_L
keycode 18 = Alt_L
keycode 19 = Pause
keycode 20 = Caps_Lock
keycode 27 = Escape Escape
keycode 32 = space space
keycode 33 = Prior
keycode 34 = Next
keycode 35 = End
keycode 36 = Home
keycode 37 = Left
keycode 38 = Up
keycode 39 = Right
keycode 40 = Down
keycode 41 = Select
keycode 42 = Print
keycode 43 = Execute
keycode 45 = Insert
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 section threesuperior
keycode 52 = 4 dollar
keycode 53 = 5 percent
keycode 54 = 6 ampersand
keycode 55 = 7 slash braceleft
keycode 56 = 8 parenleft bracketleft
keycode 57 = 9 parenright bracketright
keycode 65 = a A
keycode 66 = b B
keycode 67 = c C
keycode 68 = d D
keycode 69 = e E EuroSign
keycode 70 = f F
keycode 71 = g G
keycode 72 = h H
keycode 73 = i I
keycode 74 = j J
keycode 75 = k K
keycode 76 = l L
keycode 77 = m M mu
keycode 78 = n N
keycode 79 = o O
keycode 80 = p P
keycode 81 = q Q at
keycode 82 = r R
keycode 83 = s S
keycode 84 = t T
keycode 85 = u U
keycode 86 = v V
keycode 87 = w W
keycode 88 = x X
keycode 89 = y Y
keycode 90 = z Z
keycode 96 = KP_0 KP_0
keycode 97 = KP_1 KP_1
keycode 98 = KP_2 KP_2
keycode 99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 192 = numbersign apostrophe
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

使用

event.keyCode值為37﹐38﹐39﹐40對應按下的方向鍵分別是 左﹐上﹐右﹐下

"javascript:if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;");

if(event.keycode==13)就代表按下的是回车键盘

"javascript:if (event.keyCode > 45 && event.keyCode < 57) event.returnValue = false;");





//Javascript Document


请按任意一个键。。。。



**********************************************************************
使用javascript在WEB页面中截获键盘输入
使用event对象的keyCode属性判断输入的键值
eg:if(event.keyCode==13)alert(“enter!”);
键值对应表
A  0X65  U   0X85
B  0X66  V   0X86
C  0X67  W   0X87
D  0X68  X   0X88
E  0X69  Y   0X89
F  0X70  Z   0X90
G  0X71  0   0X48
H  0X72  1   0X49
I  0X73  2   0X50
J  0X74  3   0X51
K  0X75  4   0X52
L  0X76  5   0X53
M  0X77  6   0X54
N  0X78  7   0X55
O  0X79  8   0X56
P  0X80  9   0X57
Q  0X81 ESC  0X1B
R  0X82 CTRL  0X11
S  0X83 SHIFT 0X10
T  0X84 ENTER 0XD

如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键