<canvas id="canvas" width="200" height="200" style="background: #ccc;"></canvas>
// 箭头绘制的构造函数
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();
}

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    arrow = new Arrow();

arrow.x = canvas.width / 2;
arrow.y = canvas.height / 2;

// 鼠标跟随事件
canvas.addEventListener("mousemove", function(e) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var dx = getMouse(e).x - arrow.x,
      dy = getMouse(e).y - arrow.y;

  arrow.rotation = Math.atan2(dy, dx); // 计算箭头旋转的弧度
  arrow.draw(context);
}, false);

// 获取鼠标的当前位置
function getMouse(event) {
  var event = event || window.event;
  var mouse = {};
  var x, y;
  if(event.pageX || event.pageY) {
    x = event.pageX;
    y = event.pageY;
  } else if(event.clientX || event.clientY) {
    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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.