CODEWITHSUNDEEP
javascriptcanvas
GeKtoRiX
GeKtoRiX

Reputation: 41

Clock loop numbers in canvas

Good evening.

Who can explain why, after canvas.translate(0, -canvasRadius * 0.8); we need to use canvas.rotate(-ang)?

I assume this is to "return" to the original 0 position. But it is not clear what the lines after it are for.

for (num = 1; num < 13; num++) {
    ang = (num * Math.PI) / 6;
    canvas.rotate(ang);
    canvas.translate(0, -canvasRadius * 0.8);
    canvas.rotate(-ang);
    canvas.fillText(num.toString(), 0, 0);
    canvas.rotate(ang);
    canvas.translate(0, canvasRadius * 0.8);
    canvas.rotate(-ang);
  }

Upvotes: 0

Views: 59

Answers (1)

phuzi
phuzi

Reputation: 13060

Looks like it rotates canvas so that the subsequent translate is at the correct point for the number. A rotation in the opposite direction makes sure that the subsequent fillText is the right way up.

The remaining rotations and translate reverse the previous operations and relocate back to the origin ready for the next iteration.

Upvotes: 1

Related Questions