Tengo una imagen que se mueve sobre mis cavas a una velocidad determinada en el eje X. Cuando trato de girarlo, su trayectoria cambia y ya no se mueve solo en el eje x sino también en el eje Y. ¿Cómo puedo girar la imagen y no cambiar su curso?
Si controla el centro de rotación y realiza los cálculos de acuerdo con el libro (por ejemplo, usa coordenadas polares en el camino), debería estar bien.
Aquí hay un ejemplo de un rectángulo giratorio que se mueve con su centro de masa a lo largo de una línea horizontal:
class Polygon { constructor(points) { this.points = points; this.center = [0, 0]; // center of rotation & positioning this.rotation = 0; this.polar = points.map(([x, y]) => [Math.sqrt(x*x + y*y), Math.atan2(y, x)]); } refresh(ctx) { let [x0, y0] = this.center; this.points = this.polar.map(([dist, angle]) => { angle += this.rotation; return [Math.cos(angle) * dist + x0, Math.sin(angle) * dist + y0]; }); ctx.beginPath(); ctx.moveTo(...this.points[0]); for (let point of this.points) ctx.lineTo(...point); ctx.closePath(); ctx.stroke(); } } let shape = new Polygon([[-20, -10], [20, -10], [20, 10], [-20, 10]]); shape.center = [20, 50]; let canvas = document.querySelector("canvas"); let ctx = canvas.getContext("2d"); requestAnimationFrame(function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); shape.center[0] = (shape.center[0] + 1) % 700; shape.rotation += 0.02; shape.refresh(ctx); requestAnimationFrame(loop); }); body { margin: 0; padding: 0 } <canvas width="600" height="170"></canvas>