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

触摸事件

touchevent对象的属性

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对象本身的属性。

?

tips:在事件对象上调用preventDefault()方法，可阻止浏览器对该事件采取诸如滚动网页等默认的处理动作。此方法可以避免各种开发者不想看到的浏览器互动操作，如缩放页面、偶然选取了网页内容，以及div闪烁等。

手指缩放

对于类型为touchstart及touchmove的触摸事件，如果发现有两个点同时在触摸设备，而且它们中至少有一个位置发生了变化，那么就判定用户在pinch屏幕。如果程序发现用户正在pinch屏幕，用于处理touchstart事件的方法会计算两个触摸点之间的距离，以及当前放大倍数与该距离的比值。在touchmove事件的方法也会计算当前两个触摸点之间的距离，并且将该值乘以刚才计算好的比值，就可以得到新的放大倍数。