Canvas Animation
In this article we will learn how to create basic animation using a HTML5 canvas and JavaScript.
Continuously changing the color of a Star (Twinkling of star)
To make this work, we will first write a function that:
1. Clears the screen
2. Draws the star in a different colour 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:
- The function that is to be called at regular intervals
- The interval in microseconds.
The following function will call the changeColor() function every 400 microseconds:
animFlag = setInterval(function() {changeColor()}, 400)
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
var animFlag;
var counter = 0;
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFCC";
animFlag = setInterval(function () { changeColor() }, 400)
}
}
function changeColor() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var colour = ["#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC", "#FF33CC", "#CC0099", "#993399"];
ctx.fillStyle = color[counter];
counter++
ctx.clearRect(0, 0, 900, 500);
ctx.beginPath();
ctx.moveTo(300, 200);
ctx.lineTo(335, 125);
ctx.lineTo(370, 200);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(335, 230);
ctx.lineTo(300, 150);
ctx.lineTo(365, 150);
ctx.closePath();
ctx.fill();
if (counter > 8)
counter = 0;
}
}
</script>
<title>Animation - stars changing colors</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas>
</body>
</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.