canvas动画包教不包会：用户交互

function MClick(event){
  console.log('鼠标点击了canvas');
};

canvas.addEventListener('mousedown',MClick,false);

canvas.removeEventListener('mousedown',MClick,false);

mousedown
mouseup
click
dblclick
mousewheel
mousemove
mouseover
mouseout

canvas.addEventListener('mousedown',function(event){
  var x = (event.pageX || event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft) - canvas.offsetLeft;
  var y = (event.pageY || event.clientY + document.body.scrollTop +document.documentElement.scrollTop) - canvas.offsetTop;
},false);

window.tool = {};   
window.tool.captureMouse = function(element,mousedown,mousemove,mouseup){
 
  /*传入Event对象*/
  function getPoint(event){
    event = event || window.event; /*为了兼容IE*/
     /*将当前的鼠标坐标值减去元素的偏移位置，返回鼠标相对于element的坐标值*/
    var x = (event.pageX || event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
    x -= element.offsetLeft;
    var y = (event.pageY || event.clientY + document.body.scrollTop + document.documentElement.scrollTop);
    y -= element.offsetTop;
    return {x:x,y:y};
  };
   
  if(!element) return;
  
  /*为element元素绑定mousedown事件*/ 
  element.addEventListener('mousedown',function(event){   
    event.point = getPoint(event);   
    mousedown && mousedown.call(this,event);   
  },false);

  /*为element元素绑定mousemove事件*/   
  element.addEventListener('mousemove',function(event){   
    event.point = getPoint(event);   
    mousemove && mousemove.call(this,event);   
  },false);

  /*为element元素绑定mouseup事件*/   
  element.addEventListener('mouseup',function(event){   
    event.point = getPoint(event);   
    mouseup && mouseup.call(this,event);   
  },false);
   
};

/*回调函数会传入一个event对象，event.point中包含了x和y属性，分别对应鼠标相对element的X坐标和Y坐标，函数内的this指向绑定元素element*/
function mousedown(event) {   
  console.log(event.point.x,event.ponit.y);   
  console.log(this); 
  document.querySelector('.pointX').innerHTML = event.point.x;   
  document.querySelector('.pointY').innerHTML = event.point.y;
};    

function mousemove(event) {   
  console.log(event.point);  
  document.querySelector('.pointX1').innerHTML = event.point.x;   
  document.querySelector('.pointY1').innerHTML = event.point.y;   
  var x = event.point.x;   
  var y = event.point.y;   
  var radius = 5;   
  /*清除整个canvas画布*/
  ctx.clearRect(0,0,canvas.width,canvas.height);   
  ctx.fillStyle = 'red';   
  ctx.beginPath();
  /*绘制一个跟随鼠标的圆*/   
  ctx.arc(x,y,radius,0,2*Math.PI,true);   
  ctx.fill();   
  ctx.closePath();
};    

function mouseup(event) {   
  console.log(event.point);  
  document.querySelector('.pointX2').innerHTML = event.point.x;   
  document.querySelector('.pointY2').innerHTML = event.point.y;
};
/*传入canvas元素，后面是传入三个函数，分别对应mousedown、mousemove和mouseup事件的事件处理函数*/
tool.captureMouse(canvas, mousedown, mousemove, mouseup);

touchstart
touchmove
touchend

canvas.addEventListener('touchstart',function(event){
  var touchEvnet = event.changedTouches[0];
  var x = (touchEvent.pageX || touchEvent.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft );
  x -= canvas.offsetLeft;
  
  var y = (touchEvent.pageY || touchEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop );
  y -= canvas.offsetTop;
});

window.tool.captureTouch = function(element,touchstart,touchmove,touchend){
 
  /*传入Event对象*/
  function getPoint(event){
    event = event || window.event;
    var touchEvent = event.changedTouches[0];
     /*将当前的鼠标坐标值减去元素的偏移位置，返回鼠标相对于element的坐标值*/
    var x = (touchEvent.pageX || touchEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
    x -= element.offsetLeft;
    var y = (touchEvent.pageY || touchEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop);
    y -= element.offsetTop;
    return {x:x,y:y};
  };
   
  if(!element) return;
  
  /*为element元素绑定touchstart事件*/ 
  element.addEventListener('touchstart',function(event){   
    event.point = getPoint(event);   
    touchstart && touchstart.call(this,event);   
  },false);

  /*为element元素绑定touchmove事件*/   
  element.addEventListener('touchmove',function(event){   
    event.point = getPoint(event);   
    touchmove && touchmove.call(this,event);   
  },false);

  /*为element元素绑定touchend事件*/   
  element.addEventListener('touchend',function(event){   
    event.point = getPoint(event);   
    touchend && touchend.call(this,event);   
  },false);
   
};

window.tool.captureMT = function(element, touchStartEvent, touchMoveEvent, touchEndEvent) {   
  'use strict';   
  var isTouch = ('ontouchend' in document);   
  var touchstart = null;   
  var touchmove = null   
  var touchend = null;   
  if(isTouch){   
    touchstart = 'touchstart';   
    touchmove = 'touchmove';   
    touchend = 'touchend';   
  }else{   
    touchstart = 'mousedown';   
    touchmove = 'mousemove';   
    touchend = 'mouseup';   
  };   
  /*传入Event对象*/   
  function getPoint(event) {   
    /*将当前的触摸点坐标值减去元素的偏移位置，返回触摸点相对于element的坐标值*/     event = event || window.event;
    var touchEvent = isTouch ? event.changedTouches[0]:event;
    var x = (touchEvent.pageX || touchEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);   
    x -= element.offsetLeft;   
    
    var y = (touchEvent.pageY || touchEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop);   
    y -= element.offsetTop;   
    return {x: x,y: y};
  };
  if(!element) return;   
  /*为element元素绑定touchstart事件*/   
  element.addEventListener(touchstart, function(event) {   
    event.point = getPoint(event);   
    touchStartEvent && touchStartEvent.call(this, event);   
  }, false);    

  /*为element元素绑定touchmove事件*/   
  element.addEventListener(touchmove, function(event) {   
    event.point = getPoint(event);   
    touchMoveEvent && touchMoveEvent.call(this, event);   
  }, false);    

  /*为element元素绑定touchend事件*/   
  element.addEventListener(touchend, function(event) {   
    event.point = getPoint(event);   
    touchEndEvent && touchEndEvent.call(this, event);   
  }, false);   
};