//执行帧动画

if (!window.cancelRequestAnimationFrame) {

  window.cancelRequestAnimationFrame = (window.cancelAnimationFrame ||

                                        window.webkitCancelRequestAnimationFrame ||

                                        window.mozCancelRequestAnimationFrame ||

                                        window.msCancelRequestAnimationFrame ||

                                        window.oCancelRequestAnimationFrame ||

                                        window.clearTimeout);

}

window.utils = {};

​

//获取鼠标位置

window.utils.captureMouse = function (element) {

  var mouse = {x: 0, y: 0, event: null},

      body_scrollLeft = document.body.scrollLeft,

      element_scrollLeft = document.documentElement.scrollLeft,

      body_scrollTop = document.body.scrollTop,

      element_scrollTop = document.documentElement.scrollTop,

      offsetLeft = element.offsetLeft,

      offsetTop = element.offsetTop;

  element.addEventListener('mousemove', function (event) {

    var x, y;

    if (event.pageX || event.pageY) {

      x = event.pageX;

      y = event.pageY;

    } else {

      x = event.clientX + body_scrollLeft + element_scrollLeft;

      y = event.clientY + body_scrollTop + element_scrollTop;

    }

    x -= offsetLeft;

    y -= offsetTop;

    mouse.x = x;

    mouse.y = y;

    mouse.event = event;

  }, false);

  return mouse;

};

//箭头类

function Arrow(){

  this.x=0;

  this.y=0;

  this.color="#ffff00";

  this.rotation=0;

}

​

Arrow.prototype.draw=function(context){

  context.save();

  context.translate(this.x,this.y);

  context.rotate(this.rotation);

  context.lineWidth=2;

  context.fillStyle=this.color;

  context.beginPath();

  context.moveTo(-50,-25);

  context.lineTo(0,-25);

  context.lineTo(0,-50);

  context.lineTo(50,0);

  context.lineTo(0,50);

  context.lineTo(0,25);

  context.lineTo(-50,25);

  context.lineTo(-50,-25);

  context.closePath();

  context.fill();

  context.stroke();

  context.restore();

}

​

window.onload=function(){

  var canvas=document.getElementById("canvas"),

      context=canvas.getContext("2d"),

      mouse=utils.captureMouse(canvas),

      arrow=new Arrow();

​

  arrow.x=canvas.width/2;

  arrow.y=canvas.height/2;

  (function drawFrame(){

    window.requestAnimationFrame(drawFrame,canvas);

    context.clearRect(0,0,canvas.width,canvas.height);

    var dx=mouse.x-arrow.x,

        dy=mouse.y-arrow.y;

​

    arrow.rotation=Math.atan2(dy,dx);

    arrow.draw(context);

  }());

};