Question

我制作了一个小型的JS程序，它应该模拟球类物理，HTML画布应该调整到窗口高度。我已经做了这样画布调整大小，但是当它调整大小时鼠标位置不能正常工作，并且当点击它时球不会出现在屏幕上（就像他们应该这样做））。我一直在使用clientX＆amp; clientY获得鼠标位置，但我不知道这是否是最好的方法。这是代码：

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

然后当您为mousedown＆amp;添加事件监听器时mouseup事件，你可以设置鼠标位置：

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

  }, false);

Answer 2

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

试试这个：

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

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

2 个答案: