个人中心
gpt4 book ai didi

javascript - 使 "ball"在 Canvas 上跟随鼠标

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:58:56 26 4
gpt4 key购买 nike

我试图让一个球在 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>

最佳答案

mouseover 事件监听器不像“鼠标悬停时，执行此代码”那样工作。它仅在该状态为真时触发，换句话说，当您将鼠标从外部移动到节点上时。

您要使用的正确事件是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 时会发生什么，当删除条件时，...

关于javascript - 使 "ball"在 Canvas 上跟随鼠标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46292350/

26 4 0
文章推荐： javascript - Chart Js 负刻度
文章推荐： javascript - 通过 Django Channels 和 Websockets 向客户端推送实时更新
文章推荐： javascript - 使用 mapbox 定义基于 geojson 的多边形填充颜色
文章推荐： ios - tableCell 中的分段控件
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com