Animation:
In canvas you can do anything if you have logic.Animation is very simple to do.Two thing keep in mind before you do anyting about animation first of all what thing or object you are going to animate.Second a function which will change the position every few secod.setInterval function
do the animation for you and it takes two parameter.FIrst is which thing will animate and duration means duration of each animation to another.10 second means every ten second later it will execute the animate object.
Lets Code:
<script type="text/javascript" language="javascript">
window.onload=function(){
var canvas=document.getElementById("draw");
var mc=canvas.getContext("2d");
var x=-350,y=50;
var rotate=0;
var anim=setInterval(startanim,190);
function startanim()
{
mc.clearRect(0,0,mc.canvas.width,mc.canvas.height);
mc.fillStyle="red";
mc.font="25px Arial Black";
mc.fillText("welcome to learn html 5 tutorial site",x,y);
//mc.restore();
if(x<=mc.canvas.width)
x+=10;
if(x>mc.canvas.height)
{
x=-350;
}
};
}
</script>
<canvas width="600px" height="500px" id="draw">
Your Browser Does not support HTML 5 Canvas Tag.
</canvas>
window.onload=function(){
var canvas=document.getElementById("draw");
var mc=canvas.getContext("2d");
var x=-350,y=50;
var rotate=0;
var anim=setInterval(startanim,190);
function startanim()
{
mc.clearRect(0,0,mc.canvas.width,mc.canvas.height);
mc.fillStyle="red";
mc.font="25px Arial Black";
mc.fillText("welcome to learn html 5 tutorial site",x,y);
//mc.restore();
if(x<=mc.canvas.width)
x+=10;
if(x>mc.canvas.height)
{
x=-350;
}
};
}
</script>
<canvas width="600px" height="500px" id="draw">
Your Browser Does not support HTML 5 Canvas Tag.
</canvas>
Description:
first of all we set X and Y cordinates and we give it negative values because before animation we do not want to show our content.Then within setInterval function we give a function name and duration.That means every 190 milisecond later this function execute.All of our animation condition lyes on that startanim function.startanim function
we clear our canvas each stage of animation.If not it will draw text every where on its own path.
Then Draw some Text which will be animate.We give two variables in its positions.So every 190 millisecond later values of these variable's value will change so text will animate. Then we give a if condition and tell the browser if the X cordinates of the text if less then the total weidth of canvas then add 10 each time when the staranim function run.So every 190 millisecond later it will add 10 to the x variable that cause the move of the text.
Now when X cordinate is equal to total canvas weight then it will stop adding 10 .So that time we tell that when x cordinate is equal to total canvas weight then set the x cordinate value -350 means the starting point.
Comments
0 comments to "Animation"
Post a Comment