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是底层事件，几乎每次按键时都会触发这些事件。

触摸事件

移动端触摸事件与桌面平台的鼠标事件有两个主要的不同点

1. 鼠标光标只有一个i额，而触摸点可能有很多
2. 鼠标光标可以悬停（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事件的方法也会计算当前两个触摸点之间的距离，并且将该值乘以刚才计算好的比值，就可以得到新的放大倍数。