Programs in HTML5
11. Animation using Canvas.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400" style="border-color:#63F;
border-style:solid">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext('2d');
var x=0;
function draw()
{
x=x+10;
if(x==400) clearInterval(n);
ctx.save();
ctx.clearRect(0,0,600,500);
if(x<100)
ctx.fillStyle = "green";
else if(x<200)
ctx.fillStyle = "blue";
else if(x<300)
ctx.fillStyle = "red";
else
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(100+x,200,50,0,(2*Math.PI));
ctx.closePath();
ctx.fill();
}
var n = setInterval(function(){draw()},100);
</script>
</body>
</html>
Output :
