La pregunta lo dice todo. Solo estoy tratando de hacer que esta función funcione para que algo funcione. ¿Cómo registro la posición de x e y continuamente? He intentado crear una función para él y también poner esa función en un bucle for.
Tal vez soy demasiado novato para entender lo que estoy haciendo. ¡Por eso les pido buenos amigos!
aquí está mi javascript. No crea que necesita el html porque todo está en la etiqueta del lienzo.
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);Creo que usar setInterval debería resolver tu problema. Simplemente inicie sesión así setInterval(functionName(arg1,arg2....), 1000); aquí 1000 es milisegundo, por lo que significa 1 segundo, puede cambiarlo según lo necesite. Se ejecutará hasta que use un clearInterval en su código
Podría llamar a una función asíncrona en lugar de una función normal
Ejemplo:
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(); Documentación de la función asíncrona:
https://sodocumentation.net/javascript/topic/925/async-functions--async-await
Si no desea ejecutar una función daemon para esto, debe usar el evento onmousemove()
Simplemente agregue una etiqueta principal <div> a la identificación #myCanvas con onmousemove() llamando a una función:
<div onmousemove="myFunction()">Move the cursor over me</div> El código de muestra para myFunction() sería:
myFunction() => { let x = Math.random() * canvas.width; let y = Math.random() * canvas.height; console.log(x,y); } onmousemove() Documentación:
https://www.w3schools.com/jsref/event_onmousemove.asp
Si estoy interpretando su pregunta correctamente, solo necesita poner su última línea de código, es decir, console.log(x, y) , dentro de su función animatedSquare() , por ejemplo;
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); }