<canvas id="canvas" width="400" height="100"></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);
  };
})();

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    ball = new Ball(),
    easing = 0.05,
    targetX = canvas.width - 10,
    targetY = canvas.height / 2;
ball.x = 5;
ball.y = 5;

// 缓动动画函数
(function drawFrame() {
  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.