如何让 x 和 y 在控制台中不断更新？

Question

问题说明了一切。我只是想让这个功能发挥作用，让它发挥作用。如何连续记录 x 和 y 的位置？我试过为它创建一个函数，并将该函数放入 for 循环中。

也许我是新手，不明白我在做什么。这就是为什么我要问你们好人！

这是我的 javascript。不要认为你需要 html 因为这都在 canvas 标签中。

const body = document.body;
let canvas = document.querySelector('#myCanvas');
let c = canvas.getContext('2d');

body.style.overflowX = 'hidden';

canvas.width = window.innerWidth;
canvas.height = 500;

let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let dx = 15;
let dy = Math.random();
let xwidth = 10;
let yheight = 10;

function animatedSquare() {
    requestAnimationFrame(animatedSquare);
    c.clearRect(0,0,canvas.width, canvas.height);
    c.fillRect(x,y,xwidth,yheight);
    if(x > canvas.width || x - xwidth < 0) {
        dx = -dx;
    }
    if(y > canvas.height ||y - yheight < 0) {
        dy = -dy;
    }
    x += dx;
    y += dy;
}

animatedSquare();

console.log(x,y);

Answer 1

我认为使用 setInterval 应该可以解决您的问题。像这样 setInterval(functionName(arg1,arg2....), 1000); 在这里记录 1000 是毫秒，所以这意味着 1 秒，您可以根据需要更改它。它将运行直到您在代码中使用 clearInterval

Answer 2

您可以调用异步函数而不是普通函数

示例：

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

异步函数文档：
https://sodocumentation.net/javascript/topic/925/async-functions--async-await

如果您不想运行为此使用守护程序函数，您应该使用 onmousemove() 事件

只需将 <div> 标记父级添加到 #myCanvas id 并 onmousemove() 调用一个函数：

<div onmousemove="myFunction()">Move the cursor over me</div>

myFunction() 的示例代码为：

myFunction() => {
    let x = Math.random() * canvas.width;
    let y = Math.random() * canvas.height;
    console.log(x,y);
}

onmousemove() 文档：
https://www.w3schools.com/jsref/event_onmousemove.asp

Answer 3

如果我正确地解释了你的问题，你只需要将最后一行代码，即 console.log(x, y)，放在你的 animatedSquare() 函数中，例如;

function animatedSquare() {
    requestAnimationFrame(animatedSquare);
    c.clearRect(0,0,canvas.width, canvas.height);
    c.fillRect(x,y,xwidth,yheight);
    if(x > canvas.width || x - xwidth < 0) {
        dx = -dx;
    }
    if(y > canvas.height ||y - yheight < 0) {
        dy = -dy;
    }
    x += dx;
    y += dy;
    console.log(x,y);
}

如何让 x 和 y 在控制台中不断更新？

How do I make x and y constantly update in console?

javascript

loops

canvas