<canvas id="canvas" width="400" height="400"></canvas>

// requestAnimationFrame的兼容性写法
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

// cancelAnimationFrame的兼容性写法
window.cancelAnimationFrame = (function () {
  return window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.oCancelAnimationFrame ||
    function (timer) {
    window.clearTimeout(timer);
  };
})();

// 获得当前鼠标位置
function getMouse(ev) {
  var mouse = {
    x: 0,
    y: 0
  };
  var event = ev || window.event;
  if(event.pageX || event.pageY) {
    x = event.x;
    y = event.y;
  }else {
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    x = event.clientX + scrollLeft;
    y = event.clientY + scrollTop;
  }
  mouse.x = x;
  mouse.y = y;

  return mouse;
}

// 创建画球函数
function Ball() {
  this.x = 0;
  this.y = 0;
  this.radius = 10;
  this.fillStyle = "#f85455";
  this.draw = function(cxt) {
    cxt.fillStyle = this.fillStyle;
    cxt.beginPath();
    cxt.arc(this.x, this.y, this.radius,  0, 2 * Math.PI, true);
    cxt.closePath();
    cxt.fill();
  }
}

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    ball = new Ball(),
    spring = 0.05,
    vx = 0,
    vy = 0,
    targetX = 0,
    targetY = 0,
    friction = 0.95;
ball.x = 20;
ball.y = 20;
var mouse = {x: 0, y: 0};

canvas.addEventListener("mousemove", function(ev) {
  mouse = getMouse(ev);
  targetX = mouse.x;
  targetY = mouse.y;
  console.log(targetX + " , " + targetY);
}, false);
// 缓动动画函数
var animRequest = null;
(function drawFrame() {
  animRequest = window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  //        if(ax == 0 || y == 0) {
  //            window.cancelAnimationFrame(animRequest);
  //        }
  // 小球当前位置与目标点的距离
  var dx = targetX - ball.x;
  var dy = targetY - ball.y;
  // 小球的加速度
  var ax = dx * spring;
  var ay = dy * spring;
  // 小球的速度
  vx += ax;
  vy += ay;
  vx *= friction;
  vy *= friction;
  // 计算出小球当前的位置
  ball.x += vx;
  ball.y += vy;

  // 画小球与鼠标之间的连线
  context.beginPath();
  context.strokeStyle = "#71A4AD";
  context.moveTo(ball.x, ball.y);
  context.lineTo(targetX, targetY);
  context.stroke();
  // 画小球
  ball.draw(context);

})();