Why is this just rotating and not moving to the right?-CodePudding

I have the following web page:

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>

Why is the box not just moving to the right?

CodePudding user response：

Not sure why you have used rotate, but the easiest way is to keep the rectangle moving right, by updating right. Also, I have used requestAnimationFrame as setInterval is not performance friendly

Working code below

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() {
  requestAnimationFrame(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;
}

requestAnimationFrame(draw_box);

<h1>Welcome</h1>
<canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa"/>
</canvas>

CodePudding user response：

ctx.rotate rotates the entire canvas from the top left corner, so you should first use ctx.translate to move the top left corner to the pivot (which is the box's top left corner) and then do the same but in reverse so you reset the rotation and translation of the canvas

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>

CodePudding user response：

Because you have ctx.rotate(box_direction * Math.PI / 180);. This is rotating with the box.

<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>