让 "ball" 在 canvas 上关注鼠标

Question

我正在尝试让球在 canvas 区域内跟随鼠标移动。但是只有当鼠标进入 canvas 区域（所以在边缘）时，球才会获得第一个位置。

小球在内部移动时不跟随鼠标是怎么回事canvas？

window.onload = startup;

var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;

function startup() {
  document.getElementById("drawingArea").onmouseover = mouseMove;
  setInterval("moveBall()", 100);
}

function mouseMove(evt) {
  mouseX = evt.clientX;
  mouseY = evt.clientY;
}

function moveBall() {
  if (ballX > mouseX) {
    ballX -= 5;
  } else {
    ballX += 5;
  }
  if (ballY > mouseY) {
    ballY -= 5;
  } else {
    ballY += 5;
  }

  var canvas = document.getElementById("drawingArea");
  var ctx = canvas.getContext("2d");

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(ballX, ballY, 40, 0, 2* Math.PI);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.stroke();
}

#drawingArea {
  border-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Move Ball</title>
  </head>

  <body>
    <canvas id="drawingArea" width="800" height="800" />
  </body>
</html>

Answer 1

您还需要添加 onmousemove 事件处理程序。

Answer 2

这一行：

document.getElementById("drawingArea").onmouseover = mouseMove;

...您需要将 onmouseover 更改为 onmousemove。延伸阅读：onmousemove

带有更改的完整示例：

   window.onload = startup;
   var ballX = 400;
   var ballY = 400;
   var mouseX = 0;
   var mouseY = 0;
   
   function startup() {
    document.getElementById("drawingArea").onmousemove = mouseMove;
    setInterval("moveBall()",100);
   
   }
   
   function mouseMove(evt) {
    mouseX = evt.clientX;
    mouseY = evt.clientY;
   }
   
   function moveBall() {
    if (ballX > mouseX) {
     ballX -= 5;
    } else {
     ballX += 5;
    }
    if (ballY > mouseY) {
     ballY -= 5;
    } else {
     ballY += 5;
    }
    
    var canvas = document.getElementById("drawingArea");
    var ctx = canvas.getContext("2d");
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.arc(ballX, ballY, 40, 0, 2* Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.stroke();
   }

#drawingArea 
{
    border-style: solid;
    position: absolute;
    top: 0;
    left: 0;
}

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Move Ball</title>
 </head>

 <body>
  <canvas id="drawingArea" width="800" height="800" />
 </body>
</html>

Answer 3

mouseover 事件侦听器不像 "while mouse is over, execute this code" 那样工作。它仅在该状态为真时触发，换句话说，当您将鼠标从外部移动到节点上时。

您要使用的正确事件是 mousemove；存储鼠标的新位置，一旦它改变。

此外，我还对您的代码进行了一些其他更改，使动画更加流畅：

这种 ballX += mouseX>ballX? 5: -5 的方法容易出现卡顿，因为它完全忽略了区域，当鼠标和球在任何轴上的距离小于 5px 时。

也不要在游戏循环中使用 setInterval()。 更广泛地说，不要将 setTimeout() 或 setInterval() 与字符串参数一起使用（根本）。这是一个不好的做法。不灵活，并迫使您使用全局变量。

最好使用 requestAnimationFrame()，以便与浏览器渲染保持同步。

window.onload = startup;

var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;

function startup() {
  //`mousemove`, not `mouseover`
  document.getElementById("drawingArea").onmousemove = mouseMove;
  
  loop();
}

//use `requestAnimationFrame` for the game loop
//so you stay sync with the browsers rendering
//makes it a smoother animation
function loop(){
  moveBall();
  requestAnimationFrame(loop);
}

function mouseMove(evt) {
  mouseX = evt.clientX;
  mouseY = evt.clientY;
}

function moveBall() {
  //get the distance between the mouse and the ball on both axes
  //walk only the an eight of the distance to create a smooth fadeout
  var dx = (mouseX - ballX) * .125;
  var dy = (mouseY - ballY) * .125;
  //calculate the distance this would move ...
  var distance = Math.sqrt(dx*dx + dy*dy);
  //... and cap it at 5px
  if(distance > 5){
    dx *= 5/distance;
    dy *= 5/distance;
  }
  
  //now move
  ballX += dx;
  ballY += dy;
  
  var canvas = document.getElementById("drawingArea");
  var ctx = canvas.getContext("2d");

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(ballX, ballY, 40, 0, 2 * Math.PI);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";
  ctx.stroke();
}

#drawingArea {
  border-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="drawingArea" width="800" height="800" />

随意尝试一下移动代码。看看，当您在计算距离时更改 * .125 时会发生什么，当删除条件时，...

让 "ball" 在 canvas 上关注鼠标

Make "ball" follow mouse on canvas

javascript

canvas

onmouseover