Post
Ask Question

Canvas Animation in HTML5

Canvas Animation

 
In this article, we will learn how to create basic animation using HTML5 canvas and JavaScript.
 
Continuously changing the color of a Star (Twinkling of the star)
 
To make this work, we will first write a function that: 1. Clears the screen 2. Draws the star in a different color by going through an array of colors. The color changes will be continuous.
 
Step 1
 
We will first create a "changeColor()" method. In this method, we will create an array of colors that the star will go through.
 
var color = ["#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC","#FF33CC","#CC0099","#993399"];
 
Step 2
 
Assign a color to the fillStyle method, and increment the counter variable, as in the following:
 
ctx.fillStyle = color[counter]; counter++;
 
Step 3
 
Clear the screen so that we don't keep drawing over an already drawn star, as in the following:
 
ctx.clearRect(0,0,900,500);
 
Step 4
 
If we have reached the end of the color array, reset the counter to make the star twinkle again by changing the color, as in the following:
 
if(counter>13)
      counter = 0;
 
Now that we have the function, we must call it repeatedly at set intervals. We will use the "setInterval()" method for this. The setInterval takes 2 parameters:
  1. The function that is to be called at regular intervals
  2. The interval in microseconds.
The following function will call the changeColor() function every 400 microseconds:
 
animFlag = setInterval(function() {changeColor()}, 400)
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script type="application/javascript">  
  7.         var animFlag;  
  8.         var counter = 0;  
  9.    
  10.         function init() {  
  11.             var canvas = document.getElementById("canvas");  
  12.             if (canvas.getContext) {  
  13.                 var ctx = canvas.getContext("2d");  
  14.                 ctx.fillStyle = "#FFFFCC";  
  15.                 animFlag = setInterval(function () { changeColor() }, 400)  
  16.             }  
  17.         }  
  18.    
  19.         function changeColor() {  
  20.             var canvas = document.getElementById("canvas");  
  21.             if (canvas.getContext) {  
  22.                 var ctx = canvas.getContext("2d");  
  23.                 var colour = ["#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC", "#FF33CC", "#CC0099", "#993399"];  
  24.                 ctx.fillStyle = color[counter];  
  25.                 counter++  
  26.                 ctx.clearRect(0, 0, 900, 500);  
  27.                 ctx.beginPath();  
  28.                 ctx.moveTo(300, 200);  
  29.                 ctx.lineTo(335, 125);  
  30.                 ctx.lineTo(370, 200);  
  31.                 ctx.closePath();  
  32.                 ctx.fill();  
  33.                 ctx.beginPath();  
  34.                 ctx.moveTo(335, 230);  
  35.                 ctx.lineTo(300, 150);  
  36.                 ctx.lineTo(365, 150);  
  37.                 ctx.closePath();  
  38.                 ctx.fill();  
  39.                 if (counter > 8)  
  40.                     counter = 0;  
  41.             }  
  42.         }  
  43.     </script>  
  44.     <title>Animation - stars changing colors</title>  
  45. </head>  
  46. <body onload="init();">  
  47.     <canvas id="canvas" width="900" height="500"></canvas>  
  48. </body>  
  49. </html> 
Output
 
First Image
 
star3.jpg
 
Second Image
 
star.html.jpg
 
Third Image
 
star1.jpg
 
And so on; we will get 7 different color stars.  


Similar Articles