Rotating Circle Animation in HTML5

This article describes 2-D transformations, especially translation and rotation.
Step 1
The first step is to define the parameters of the circle. Keep in mind that the preceding circle is not one single arc drawn as a circle, but 10 sectors drawn around the center to make a circle. So each sector will subtend an angle of 36 degrees.
  1. var centreX = 100; var centreY = 100;
  2. var radius = 75;
  3. var rotateAngle = 36 * Math.PI / 180;
  4. var startAngle = 0 * Math.PI / 180;
  5. var endAngle = 36 * Math.PI / 180;
Step 2
We create an array of colors to fill each sector of a circle.
var colors = ["teal", "red", "green", "blue", "yellow", "violet", "orange", "grey", "navy blue", "purple"];
Step 3
Since 10 sectors make up the circle, we will draw them using a "for loop". Before drawing each sector, we will:
  1. Rotate the canvas about the center of the circle.
  2. Assign a color for the sector from the array "colors".
  1. function drawWheel() {
  2. var canvas = document.getElementById("canvas");
  3. if (canvas.getContext) {
  4. var ctx = canvas.getContext("2d");
  5. for (i = 0; i < 10; i++) {
  6. ctx.fillStyle = colours[i];
  7. ctx.translate(centreX, centreY);
  8. ctx.rotate(rotateAngle);
  9. ctx.translate(-centreX, -centreY);
  10. ctx.beginPath();
  11. ctx.moveTo(centreX, centreY);
  12. ctx.lineTo(centreX + radius, centreY);
  13. ctx.arc(centreX, centreY, radius, startAngle, endAngle, false);
  14. ctx.closePath();
  15. ctx.fill();
  16. }
  17. }
  18. }
Step 4
To rotate the circle we first define a rotating angle, using the following:
var rotateAngle = 36 * Math.PI / 180;
Step 5
Rotate the canvas about the centre of the circle.
  1. ctx.translate(centreX,centreY);
  2. ctx.rotate(rotateAngle);
  3. ctx.translate(-centreX,-centreY);
Step 6
Draw the circle again, with the rotated canvas.
drawWheel();
Step 7
A counter keeps track of the number of times the canvas is rotated. When the number of rotations desired is done, stop the animation using the clearInterval() method.
  1. counter++;
  2. if (counter > rnd) {
  3. counter = 0;
  4. clearInterval(animFlag);
  5. }
Step 8
Draw the "Rotate" button. Use the addEventListener() method to detect a mouse click. If the mouse is clicked inside the "Rotate" button, then call the rotateWheel() function.
  1. function mouseClick(event) {
  2. var x = event.clientX;
  3. var y = event.clientY;
  4. var rnd = Math.ceil(Math.random() * 100);
  5. if ((x > 200) && (x < 275) && (y > 100) && (y < 120))
  6. animFlag = setInterval(function () { rotateWheel(rnd) }, 25);
  7. }
  8. window.addEventListener("click", mouseClick, false);
Example
  1. <!DOCTYPE html>
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta content="text/html; charset=ISO-8859-1"
  6. http-equiv="content-type">
  7. <script type="application/javascript">
  8. var centreX = 100; var centreY = 100;
  9. var radius = 75;
  10. var rotateAngle = 36 * Math.PI / 180;
  11. var startAngle = 0 * Math.PI / 180;
  12. var endAngle = 36 * Math.PI / 180;
  13. var counter = 0;
  14. var animFlag;
  15. var colours = ["teal", "red", "green", "blue", "yellow", "violet", "orange", "grey", "navy blue", "purple"];
  17. function init() {
  18. var canvas = document.getElementById("canvas");
  19. if (canvas.getContext) {
  20. var ctx = canvas.getContext("2d");
  21. ctx.lineWidth = 3.0;
  22. ctx.fillStyle = "orange";
  23. ctx.fillRect(200, 100, 75, 20);
  24. ctx.fillStyle = "black";
  25. ctx.font = "15px verdana";
  26. ctx.fillText("Rotate", 215, 114);
  27. drawWheel();
  28. }
  29. }
  31. function drawWheel() {
  32. var canvas = document.getElementById("canvas");
  33. if (canvas.getContext) {
  34. var ctx = canvas.getContext("2d");
  35. for (i = 0; i < 10; i++) {
  36. ctx.fillStyle = colours[i];
  37. ctx.translate(centreX, centreY);
  38. ctx.rotate(rotateAngle);
  39. ctx.translate(-centreX, -centreY);
  40. ctx.beginPath();
  41. ctx.moveTo(centreX, centreY);
  42. ctx.lineTo(centreX + radius, centreY);
  43. ctx.arc(centreX, centreY, radius, startAngle, endAngle, false);
  44. ctx.closePath();
  45. ctx.fill();
  46. }
  47. }
  48. }
  50. function rotateWheel(rnd) {
  51. var canvas = document.getElementById("canvas");
  52. if (canvas.getContext) {
  53. var ctx = canvas.getContext("2d");
  54. ctx.translate(centreX, centreY);
  55. ctx.rotate(rotateAngle);
  56. ctx.translate(-centreX, -centreY);
  57. drawWheel();
  58. counter++;
  59. if (counter > rnd) {
  60. counter = 0;
  61. clearInterval(animFlag);
  62. }
  63. }
  64. }
  66. function mouseClick(event) {
  67. var x = event.clientX;
  68. var y = event.clientY;
  69. var rnd = Math.ceil(Math.random() * 100);
  70. if ((x > 200) && (x < 275) && (y > 100) && (y < 120))
  71. animFlag = setInterval(function () { rotateWheel(rnd) }, 25);
  72. }
  73. window.addEventListener("click", mouseClick, false);
  75. </script>
  76. <title>Animation - Moving Banner</title>
  77. </head>
  78. <body onload="init();">
  79. <canvas id="canvas" width="600" height="500"></canvas>
  80. <br>
  81. </body>
  82. </html>
Output
circle.jpg