Post
Ask Question

Rotating a Circle Using Canvas in HTML5

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>  
  2.    
  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"];  
  16.    
  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.         }  
  30.    
  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.         }  
  49.    
  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.         }  
  65.    
  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);  
  74.    
  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


Similar Articles