如何在 Javascript 中正确获取鼠标位置

How do I properly get the mouse position in Javascript?

本文关键字：获取鼠标位置 Javascript 更新时间：2023-09-26

我做了一个小的JS程序，应该模拟球物理，HTML画布应该调整为窗口高度。我已经这样做了，以便画布调整大小，但是当它调整大小时，鼠标位置无法正常工作，并且单击时球不会出现在屏幕上（就像它们应该的那样）。我一直在使用clientX和clientY来获取鼠标位置，但我不知道这是否是最好的方法。这是代码：

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		BODY {
            background: #00000;
		}
		#myCanvas {
			background-color: black;
		}
	</style>
	<title>Ball Simulator</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script type="text/javascript">
		
	$(function() {
	  c = document.getElementById('myCanvas');
	  ctx = c.getContext("2d");
	  objects = [];
	  init()
	  c.addEventListener("mousedown", onMouseDown);
	  c.addEventListener("mouseup", onMouseUp);
	  ctx.fillStyle = "#FFFFFF";
	});
	function resizeCanvas() {
	  c.width = window.innerWidth;
	  c.height = window.innerHeight;
	}
	function ball(x, y, radius, xVel, yVel) {
	  this.x = x;
	  this.y = y;
	  this.radius = radius;
	  this.xVel = xVel;
	  this.yVel = yVel;
	  this.direction = Math.random() * Math.PI * 2
	  objects.push([x, y, radius, xVel, yVel, this.direction])
	};
	function stylusBall(x, y, radius) {
	  ctx.beginPath();
	  ctx.arc(x, y, radius, 0, 2 * Math.PI);
	  ctx.fill();
	}
	function getDistance(x1, y1, x2, y2) {
	  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
	};
	function getVerticalDistance(y1, y2) {
	  return y2 - y1
	};
	function getAngle(x1, y1, x2, y2) {
	  return Math.atan2(x2 - x1, y2 - y1);
	};
	function updateData() {
	  ctx.clearRect(0, 0, 6000, 3100);
	  for (i = 0; i < objects.length; i++) {
	    var close = false
	    var x = objects[i][0];
	    var y = objects[i][1];
	    var radius = objects[i][2];
	    var xVel = objects[i][3];
	    var yVel = objects[i][4];
	    var dir = objects[i][5];
	    for (n = 0; n < objects.length; n++) {
	      if (n != i) {
	      	close = false
	        var nX = objects[n][0];
	        var nY = objects[n][1];
	        var nRadius = objects[n][2];
	        var nAngle = getAngle(x, y, nX, nY);
	        var distance = getDistance(x, y, nX, nY);
	        if (distance == (nRadius + radius) || distance < (nRadius + radius)) {
	          var bounceForce = 1.5
	          xVel = xVel * -1 + bounceForce * Math.cos(nAngle);
	          yVel = yVel * -1 + bounceForce * Math.sin(nAngle);
	          close = true
	        };
	      };
	    }
	    if (getVerticalDistance(y, window.innerHeight - 5 - radius) > 0 && !close) {
	      yVel += 2;
	    } else if (getVerticalDistance(y, window.innerHeight - 5 - radius) < 0) {
	      yVel = yVel * -1;
	      if (getVerticalDistance(y, window.innerHeight - 5 - radius) < -20) {
	        y = y - 50
	      }
	    }
	    yVel *= 0.97;
	    xVel *= 0.99;
	    objects[i][3] = xVel
	    objects[i][4] = yVel
	    objects[i][0] = x + xVel
	    objects[i][1] = y + yVel
	  };
//	  window.requestAnimationFrame(updateData)
	};
	function drawArrow(x1, y1, x2, y2) {
	}
	function mouseMove(e) {
	  mouseX = e.clientX;
	  mouseY = e.clientY;
	}
	function onMouseDown() {
	  createRadius = 5;
	  anim = requestAnimationFrame(increase);
	};
	function increase() {
	  if (createRadius < 80) {
	    createRadius += 3;
	  }
	  newStylus = new stylusBall(mouseX, mouseY, createRadius)
	  anim = requestAnimationFrame(increase);
	};
	function onMouseUp() {
	  window.cancelAnimationFrame(anim);
	  newBall = new ball(mouseX, mouseY, createRadius, 0, 0);
	};
	function render() {
	  for (i = 0; i < objects.length; i++) {
	    ctx.beginPath();
	    ctx.arc(objects[i][0], objects[i][1], objects[i][2], 0, 2 * Math.PI);
	    ctx.fill();
	  };
//	  window.requestAnimationFrame(render)
	};
	function loop() {
		c.width = window.innerWidth;
		c.height = window.innerHeight;
		updateData();
		render();
		window.requestAnimationFrame(loop);
	}
	function init() {
	  loop();
	}
	</script>
</head>
  <body style="margin: 0;">
    <canvas id='myCanvas' onmousemove="mouseMove(event)">
  </body>
</html>

我认为这可以提供帮助，您需要获取相对于画布的鼠标位置。因此，创建一个函数来获取鼠标位置：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

然后，当您为鼠标按下和鼠标向上事件添加事件侦听器时，您可以设置鼠标位置：

canvas.addEventListener('mousedown', function(evt) {
    isMouseDown = true;
    mousePos = getMousePos(canvas, evt);
    message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
  }, false);

如果要获取相对于画布左上点的鼠标位置，则应使用 event.offsetX 和 event.offsetY（假设您已将 mousemove 事件处理程序附加到画布元素）。

试试这个：

function mouseMove(e) {
      var mouseX = e.offsetX;
      var mouseY = e.offsetY;
}