用户交互也许是我们进修canvas动画中起首须要控制的部份。毕竟，假如没有交互或许向动画中做一些动态的输入，那末这跟看电影有什么区别呢？用户交互基于事宜，一般来说包括：鼠标事宜，触摸事宜和键盘事宜。
1、事宜和事宜实行
在理解事宜之前，你须要邃晓什么是listener和handler。
listener(即监听器)决议当一个事宜发作时是不是做出回响反映。handler(即实行者)是一个函数，当事宜发作时被挪用。好了，扯了这么多直接上代码：
element.addEventListener(type, handler[, useCapture]);
type: 事宜范例
handler: 事宜实行函数
useCapture: 可选，为布尔值false/true, 示意在冒泡/捕捉阶段实行
经由过程要领addEventListener来为某一元素增加事宜，详细到我们的canvas上是什么样的呢？到场我们如今想要在canvas上绑定一个mousedown事宜，详细代码以下：
canvas.addEventListener('mousedown', function(event){
console.log("Mouse pressed on element");
}, false)
如许我们就为canvas绑定了鼠标点击事宜，当在canvas上按下鼠标是就会在控制台看到打印出 “Mouse pressed on element”。
那末既然有增加事宜(addEventListener)，就有移除事宜(removeEventListener)，运用体式格局与增加事宜险些完整一样：
element.removeEventListener(type, handler[, useCapture]);
type: 事宜范例
handler: 事宜实行函数
useCapture: 可选，为布尔值false/true, 示意在冒泡/捕捉阶段实行唯一须要注重的是handler,即移除事宜的函数，这里只能写函数名，而不能像增加事宜一样将悉数功用函数悉数写入。也就是说，在增加某个事宜的时刻，我们可以将须要实行的函数写在事宜监听以外并定名，如许假如你想要在后续的代码中移除该事宜，直接将函数名传入移除事宜的handler中即可。
如今让我们来试验下先为canvas增加一个事宜，再将其移除
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script></script>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
//定义的实行函数add
function add(event){
console.log("mouse down");
}
canvas.addEventListener('mousedown', add, false);
//移除事宜mousedown
canvas.removeEventListener('mousedown', add, false)
}
</script>
</body>
如今你可以看看控制台是不是还能打印出“mouse down”！
2.鼠标事宜
鼠标事宜一共可以分为：
mousedown
mouseup
click
dbclick
mousewheel
mouseover
mouseout
每个鼠标事宜都包括两个属性来决议当前鼠标的位置：pageX和pageY。经由过程pageX和pageY，另有canvas元素的偏移位置，我们就可以计算出鼠标详细是在canvas元素的什么位置。为了斟酌差别浏览器的兼容性，以防万一你可以运用clientX和clientY。在这里，我们建立一个js文件，名为**utils.js**,这个文件是我们的一个东西函数，里面会逐步到场一些我们重复运用的要领，那末如今我们向我们的东西函数中增加第一个要领captureMouse,详细代码以下：
utils.js文件
//将utils定义为window对象下的一个属性，属性值为对象
window.utils = {};
//在utils对象上定义捕捉坐标的要领
window.utils.captureMouse = function(element){
//定义一个名为mouse的对象
var mouse = {x:0,y:0};
//为元素绑定mousemove事宜
element.addEventListener('mousemove',function(event){
var x,y;
//猎取鼠标位于当前屏幕的位置， 并作兼容处置惩罚
if(event.pageX||event.pageY){
x = event.pageX;
y = event.pageY;
}else{
x = event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +document.documentElement.scrollTop;
}
//将当前的坐标值减去元素的偏移位置，即为鼠标位于当前canvas的位置
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x = x;
mouse.y = y;
},false);
//返回值为mouse对象
return mouse;
}这个要领将DOM元素作为参数传入，如许我们只要将canvas传入就可以猎取到鼠标在当前canvas的位置。详细代码以下：
<canvas id="canvas" width='500' height="500" style="background:#000">
<p>you browser not support canvas!<p>
</canvas>
<script src='../js/utils.js'></script>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'),
//将canvas传入，该要领会返回一个包括属性x和y的对象
mouse = utils.captureMouse(canvas);
//为canvas绑定mousedown事宜，当鼠标按下的时刻打印出当前鼠标相对于canvas的坐标值
canvas.addEventListener('mousedown',function(event){
console.log("x:" +mouse.x +",y:" + mouse.y);
});
</script>
Have a try!!!看看可否胜利。
getBoundingClientRect（）
实在，关于canvas的鼠标位置猎取的要领还可以应用它本身的一个要领getBoundingClientRect，这里做一个引见，你可以运用，但本系列文章主要运用上面这类更具广泛性的要领。详细代码可以参考以下：
canvas.addEventListener('mousedown',function(event){
//event兼容处置惩罚
var event = event || window.event;
//兼容处置惩罚，猎取当前鼠标相对屏幕的坐标
var winX = event.clientX+document.body.scrollLeft +document.documentElement.scrollLeft || event.pageX;
var winY = event.clientY+document.body.scrollTop +document.documentElement.scrollTop || event.pageY;
//定义一个对象
var can = {x:0, y:0};
//挪用getBoundingClientRect要领，该要领返回一个对象，包括canvas的left、 top、 width、 height等值
var canBox = canvas.getBoundingClientRect();
//（winX - canBox.left）：与上面的寄义一样，是减去canvas的偏移量
//（canvas.width/canBox.width）：一般来说canvas.width和canBox.width是一样的，也就是说这两个的比值为1.但不消除你会为canvas设置边框，这是现实的坐标位置就会有所变化，比方canvas.width = 500, 你能够设置了一个1px的边框，那末canBox.width = 502, 所以比值就不为1了。如许做只是让数据更准确。
can.x = (winX - canBox.left)*(canvas.width/canBox.width);
can.y = (winY - canBox.top)*(canvas.height/canBox.height);
//输出
console.log(can.x，can.y);
},false);
3、键盘事宜
键盘事宜就两个：
keydown
keyup
我们一样可以向绑定鼠标事宜那样为canvas绑定键盘事宜。好吧！如今我们来看看，如何将一个键盘事宜绑定到window(为何不直接绑定到canvas上呢？想一想)上：
<body >
<p>恣意按下按键</p>
<script>
window.onload = function(){
//定义键盘事宜
function onKeyboard(event){
switch (event.keyCode){
case 38:
console.log('up!');
break;
case 40:
console.log('down!');
break;
case 37:
console.log('left!');
break;
case 39:
console.log('right!');
break;
default:
console.log(event.keyCode);
}
}
//为window对象绑定键盘事宜
window.addEventListener('keydown',onKeyboard,false)；
}
</script>
</body>
试一试，当按下鼠标的方向键是是不是在控制台打印出了响应的信息！
4、触摸事宜
触摸事宜包括以下3种：
touchstart
touchend
touchmove
触摸实践中，手指就充当了鼠标的作用。一样我们最为体贴的是当前触摸的位置。和captureMouse要领一样，这里在我们的东西函数文件中，须要增加一新的要领来捕捉触摸的位置，名为captureTouch,如今在utils.js文件中增加以下要领：
utils.js文件
window.utils.captureTouch = function (element) {
var touch = {
x: null,
y: null,
isPressed: false,
event: null
}；
var body_scrollLeft = document.body.scrollLeft,
element_scrollLeft = document.documentElement.scrollLeft,
body_scrollTop = document.body.scrollTop,
element_scrollTop = document.documentElement.scrollTop,
offsetLeft = element.offsetLeft,
offsetTop = element.offsetTop;
// 绑定touchstart事宜
element.addEventListener('touchstart', function (event) {
touch.isPressed = true;
touch.event = event;
}, false);
// 绑定touchend事宜
element.addEventListener('touchend', function (event) {
touch.isPressed = false;
touch.x = null;
touch.y = null;
touch.event = event;
}, false);
//绑定touchmove事宜
element.addEventListener('touchmove', function (event) {
var x, y,
touch_event = event.touches[0]; //第一次touch
if (touch_event.pageX || touch_event.pageY) {
x = touch_event.pageX;
y = touch_event.pageY;
} else {
x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
y = touch_event.clientY + body_scrollTop + element_scrollTop;
}
//剪去偏移量
x -= offsetLeft;
y -= offsetTop;
touch.x = x;
touch.y = y;
touch.event = event;
}, false);
//返回touch对象
return touch;
};
总结
这一节主要引见用户与canvas交互的种种事宜，主要的是你应当在你本身的东西函数文件中包括了以下两个要领：utils.captureTouch和utils.captureMouse这两个要领都是为了猎取当前相对于canvas元素的位置。我们将在背面的章节中频仍运用。固然，除了这两个要领，因为我们运用的requestAnimationFrame要领一样也涉及到兼容性的题目，我们将它一同增加到utils.js中，详细代码请检察utils.js文件。
下一节，三角函数坐标扭转敬请期待！！！
