如何计算鼠标指针存在于某个点的角度？

Question

How do I calculate the angle at which the mouse pointer is present relative to the screen right bottom corner?

Answer 1

Add an event listener for mousemove , get the coordinates of the mouse with event.pageX and event.pageY , and use Math.atan2 to calculate the angle:

 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>

We can take it one step further by playing around with HTML5 Canvas using CanvasRenderingContext2D.arc() and 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>