canvas動(dòng)畫包教不包會(huì)：用戶交互

function MClick(event){
  console.log('鼠標(biāo)點(diǎn)擊了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對(duì)象*/
  function getPoint(event){
    event = event || window.event; /*為了兼容IE*/
     /*將當(dāng)前的鼠標(biāo)坐標(biāo)值減去元素的偏移位置，返回鼠標(biāo)相對(duì)于element的坐標(biāo)值*/
    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);
   
};

/*回調(diào)函數(shù)會(huì)傳入一個(gè)event對(duì)象，event.point中包含了x和y屬性，分別對(duì)應(yīng)鼠標(biāo)相對(duì)element的X坐標(biāo)和Y坐標(biāo)，函數(shù)內(nèi)的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;   
  /*清除整個(gè)canvas畫布*/
  ctx.clearRect(0,0,canvas.width,canvas.height);   
  ctx.fillStyle = 'red';   
  ctx.beginPath();
  /*繪制一個(gè)跟隨鼠標(biāo)的圓*/   
  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元素，后面是傳入三個(gè)函數(shù)，分別對(duì)應(yīng)mousedown、mousemove和mouseup事件的事件處理函數(shù)*/
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對(duì)象*/
  function getPoint(event){
    event = event || window.event;
    var touchEvent = event.changedTouches[0];
     /*將當(dāng)前的鼠標(biāo)坐標(biāo)值減去元素的偏移位置，返回鼠標(biāo)相對(duì)于element的坐標(biāo)值*/
    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對(duì)象*/   
  function getPoint(event) {   
    /*將當(dāng)前的觸摸點(diǎn)坐標(biāo)值減去元素的偏移位置，返回觸摸點(diǎn)相對(duì)于element的坐標(biāo)值*/     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);   
};