Canvas事件处理
鼠标事件
canvas.onmousedown = function(e ) {//React to the mouse down event };
canvas.addEventListener('mousedown', function(e ) { //React to the mouse down event});
上面一种方法看起来更简单一些，但是，如果需要向某个鼠标事件注册多个监听器的话，那么用addEventListener()方法会更合适。
浏览器通过事件对象传递给监听器的鼠标坐标，是窗口坐标（window coordinate），而不是相对与canvas自身的坐标。而大部分情况下，开发者需要知道的是发生鼠标事件的点相对于canvas的位置，而不是在整个窗口中的位置，所以有必要进行坐标变换。
function windowToCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect();
return { x: x – bbox.left * (canvas.width / bbox.width), y: y – bbox.top * (canvas.height / bbox.height) }; }
上述方法，在canvas对象上调用getBoundingClientRect()方法，来获取canvas元素的边界框，该边界框的坐标是相对于整个窗口的。然后返回一个对象，该对象的x、y属性分别对应于鼠标在canvas之中的坐标。该方法不止是对两个坐标进行平移缩放，在canvas元素大小与绘图表面大小不相符时，它还对这两个坐标进行了缩放。
canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个是元素绘图表面（drawing surface）的大小。以内联方式设置width和height属性，实际上是同时设置了元素本身的大小与元素绘图表面的大小。然而，如果通过CSS来设定canvas元素的大小，那么只会改变元素本身的大小，而不会影响到绘图表面。
如果css设定的canvas元素大小域其绘图表面大小不同，浏览器就会对绘图表面进行缩放，使其符合元素的大小，类似于设定了图片的宽与高，但是与图片本身尺寸不同，那么，图片会被拉伸一样。
键盘事件
canvas是一个不可获取焦点的元素，所以，在canvas上新增键盘事件监听器是徒劳的。如果想要检测键盘事件的话，你应该在document或window对象上新增键盘事件监听器才对。
keydown
keypress
keyup
keydown与keyup是底层事件，几乎每次按键时都会触发这些事件。
触摸事件
移动端触摸事件与桌面平台的鼠标事件有两个主要的不同点
- 鼠标光标只有一个i额，而触摸点可能有很多
- 鼠标光标可以悬停（hover），而触摸点则不行
处理触摸事件的方式，在许多方面与处理鼠标事件相似，例如
canvas.ontouchstart = function(e ) { alert("touch start"); };
canvas.addEventListener("touchstart", function(e ) { alert("touch start"); });
触摸事件
事件类型 | 是否可以取消 | 是否走完整个冒泡式触发过程 | 描述 | 浏览器对该事件的默认处理方式 |
touchstart | 是 | 是 | 用户将某个触摸点置于触摸界面上 | 未定义 |
touchmouve | 是 | 是 | 在触摸界面上移动触摸点 | 未定义 |
touchend | 是 | 是 | 触摸点离开了触摸区域 | 根据具体情况而定，可能将其视为：mousemove，mousedown、mouseup、click |
touchcancel | 是 | 是 | 触摸点的触摸动作被打断，或是触摸点个数超出了设备所能处理的范围 | 未定义 |
touchevent对象的属性
属性名 | 属性值的数据类型 | 描述 |
touches | TouchList | 由正在界面上触摸的各个触摸点所组成的列表 |
changedTouches | TouchList | 与上次触摸事件相比，发生改变的各个触摸点，对于touchstart事件来说，它表示那些刚刚被激活的触摸点。对于touchmove事件来说，表示那些位置发生了移动的触摸点。对于touchend与touchcancel来说，表示那些不再停留于触摸界面之上的触摸点 |
targetTouches | TouchList | 正在界面上触摸而且位于当前元素范围之内的那些触摸点。除非某个触摸点被拖到了元素范围之外，否则该列表就等同于touches列表 |
altKey ctrlKey metaKey shiftKey | boolen | 如果在触摸事件发生时，与之对应的按键Alt Ctrl Meta或Shift处于被按下的状态，那么其值就是true，由于某些移动设备并没有物理键盘，所以这些属性的值可能是不确定的。 |
TouchList对象
TouchList对象有两个属性
length
Touch identifiedTouch(identifier)
给定某个TouchList对象，可以可以通过length属性获取列表中所含Touch对象的个数
canvas.ontouchstart = function(e) {alert("e.touches.length + ' touches on the device'); };
可以像操作数组那样，访问TouchList之中的每一个Touch元素
canvas.ontouchstart = function(e) { for var i=0;i<e.touches.length; ++i} { alert("Touch at: " + e.touches[i].pageX + "," + e.touches[i].pageY); } };
Touch对象
触摸事件监听器最终还是需要检查Touch对象本身的属性。
属性名 | 属性值的数据类型 | 描述 |
clientX | long | 触摸点相对于视窗的X坐标，该值不包含滚动条宽度 |
clientY | long | Y坐标，不包含滚动条高度 |
identifier | long | 代表触摸点身份的独特标识符，同一个触摸点的身份标识符在不同的事件中保持不变 |
pageX | long | 触摸点相对于视窗的X坐标，包含滚动条的宽度 |
pageY | long | 相对于视窗的Y坐标，包含滚动条高度 |
screenX | long | 触摸点相对于屏幕的X坐标 |
screenY | long | 触摸点相对于屏幕的Y坐标 |
target | EventTarget | 触摸动作开始时，触摸点所在的元素。就算该点其后被拖出了初始元素，target依然会指向一开始的那个元素。 |
tips:在事件对象上调用preventDefault()方法，可阻止浏览器对该事件采取诸如滚动网页等默认的处理动作。此方法可以避免各种开发者不想看到的浏览器互动操作，如缩放页面、偶然选取了网页内容，以及div闪烁等。
手指缩放
对于类型为touchstart及touchmove的触摸事件，如果发现有两个点同时在触摸设备，而且它们中至少有一个位置发生了变化，那么就判定用户在pinch屏幕。如果程序发现用户正在pinch屏幕，用于处理touchstart事件的方法会计算两个触摸点之间的距离，以及当前放大倍数与该距离的比值。在touchmove事件的方法也会计算当前两个触摸点之间的距离，并且将该值乘以刚才计算好的比值，就可以得到新的放大倍数。
