Tengo la siguiente pagina web:
var box_x = 30; var box_y = 30; var box_width = 30; var box_height = 30; var box_direction = 20; // Degrees clockwise function draw_box() { var c = document.getElementById("area"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, 500, 500); ctx.rotate(box_direction * Math.PI / 180); ctx.fillRect(box_x, box_y, 100, 50); box_x += 2; } setInterval(draw_box, 1000); <h1>Welcome</h1> <canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa" /> </canvas>¿Por qué la caja no se mueve simplemente hacia la derecha?
ctx.rotate gira todo el lienzo desde la esquina superior izquierda, por lo que primero debe usar ctx.translate para mover la esquina superior izquierda al pivote (que es la esquina superior izquierda del cuadro) y luego hacer lo mismo pero al revés para restablecer la rotación y traslación del lienzo
var box_x = 30; var box_y = 30; var box_width = 30; var box_height = 30; var box_direction = 20; // Degrees clockwise function draw_box() { var c = document.getElementById("area"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, 500, 500); ctx.translate(box_x, box_y); ctx.rotate(box_direction * Math.PI / 180); ctx.fillRect(0, 0, 100, 50); ctx.rotate(-box_direction * Math.PI / 180); ctx.translate(-box_x, -box_y); box_x += 2; } setInterval(draw_box, 1000); <h1>Welcome</h1> <canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa" /> </canvas>Porque tienes ctx.rotate(box_direction * Math.PI / 180); . Esto está girando con la caja.
<html> <head> <title>Rectangles wandering around aminlessly</title> </head> <body <h1>Welcome</h1> <canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa"/> </canvas> <script lang="javascript"> var box_x = 30; var box_y = 30; var box_width = 30; var box_height = 30; var box_direction = 20; // Degrees clockwise function draw_box() { var c = document.getElementById("area"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, 500, 500); ctx.fillRect(box_x, box_y, 100, 50); box_x += 2; } setInterval(draw_box, 1000); </script> </body>