<canvas id="canvas" width="400" height="400"></canvas>
// 创建画球函数
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();
  }
}

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

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

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    ball = new Ball(),
    easing = 0.05,
    targetX = 0,
    targetY = 0,
    mouse = {x: 0, y: 0};
ball.x = 5;
ball.y = 5;

canvas.addEventListener("mousemove", function(ev) {
  mouse = getMouse(ev);
  targetX = mouse.x;
  targetY = mouse.y;
}, false);

// 缓动动画函数
(function drawFrame() {
  animRequest = window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  var vx = (targetX - ball.x) * easing;
  var vy = (targetY - ball.y) * easing;

  ball.x += vx;
  ball.y += vy;
  ball.draw(context);
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.