如何计算鼠标指针指向某个点的角度？

Question

如何计算鼠标指针相对于屏幕右下角的角度？

Answer 1

为 增加一个事件监听器mousemove，用event.pageX和获取鼠标的坐标event.pageY，并用于Math.atan2计算角度：

var angle = document.getElementById("angle");
var p2 = {
  x: window.innerWidth,
  y: window.innerHeight
};
document.addEventListener("mousemove", function(e) {
  var p1 = {
    x: e.pageX,
    y: e.pageY
  };
  var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
  angle.innerHTML = Math.round(angleDeg);
})

Angle: <span id="angle">[move mouse first!]</span>

我们可以通过使用CanvasRenderingContext2D.arc()和玩 HTML5 Canvas 来更进一步CanvasRenderingContext2D.lineTo()：

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText("Move your cursor over the canvas to get started", 10, 30);
var p2 = {
  x: window.innerWidth,
  y: window.innerHeight
};
document.addEventListener("mousemove", function(e) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var p1 = {
    x: e.pageX,
    y: e.pageY
  };
  ctx.beginPath();
  ctx.moveTo(canvas.width, canvas.height);
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
  var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
  var a = p1.x - p2.x;
  var b = p1.y - p2.y;
  var c = Math.sqrt(a * a + b * b);
  ctx.beginPath();
  ctx.moveTo(canvas.width, canvas.height);
  ctx.arc(canvas.width, canvas.height, 50, 1 * Math.PI, 1 * Math.PI + (2 / 360 * Math.round(angleDeg) * Math.PI), false);
  ctx.closePath();
  ctx.stroke();
  ctx.fillText(Math.round(angleDeg)+"°", canvas.width - 70, canvas.height - 20);
})

body,
html {
  margin: 0;
  height: 100%;
}

<canvas id="canvas"></canvas>