Thursday, 15 August 2013

JQuery - Create a Flag by animation using Canvas and Div tag

Please use browser other than IE to see the animation present inside the circle because it is code in canvas tag.
Output :






Happy Independence Day
















      In this article we are going to see how to animate with canvas in Div tag, It is used to draw graphics on the fly. Animate method is used to animate the given element and slide Down is used to slide down the element with timing.Here we are going to do a sample program with the following two elements to animate and draw a flag Canvas, Div and following three methods to do the actions animate, slideDown, SlideUp.





JQuery - Animate using Canvas in Div tag to Draw a Flag - (JQuery Source)


JQuery Source

<script type="text/javascript">
$(document).ready(
function(){
g();

}

);

function g(){

$('#stick').animate({height:"400px"},5000,function(){



$('#br').slideDown(8000,function(){
$('#sf').animate({width:"210px" },'slow',function(){
$('#sf').animate({height:"40px" },'slow',function(){

$('#bt').animate({width:"216px"},'slow',function(){

$('#gr').animate({width:"210px"},'slow');
$('#wh').animate({width:"210px"},'slow',function(){

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


var cc= document.getElementById('c');
 var context = cc.getContext('2d');
 var x =105;
 var y = 20;
 var radius = 20;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI /2;

 context.lineWidth = 2;
 context.strokeStyle = 'blue';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 2;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, cc.width, cc.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) , false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }


 }
animate();


$('#c').show(500,function(){

$('#s1').show(2000,function(){

var ss1=cc.getContext("2d");

ss1.beginPath();
ss1.moveTo(105,0);
ss1.lineTo(105,20);
ss1.lineWidth="1.5";
ss1.shadowBlur=1;
ss1.strokeStyle="blue";
ss1.stroke();

$('#s25').show('fast',function(){

var ss1=cc.getContext("2d");

ss1.beginPath();
ss1.moveTo(105,0);
ss1.lineTo(105,20);
ss1.lineWidth="1.5";
ss1.shadowBlur=1;
ss1.strokeStyle="blue";
ss1.stroke();


$('#s2').slideDown('fast',function(){

var ss2=cc.getContext("2d");

ss2.beginPath();
ss2.moveTo(105+5,0+1);
ss2.lineTo(105,20);
ss2.strokeStyle="blue";
ss2.stroke();

$('#s3').slideDown('fast',function(){

var ss3=cc.getContext("2d");

ss3.beginPath();
ss3.moveTo(105+10,0+2);
ss3.lineTo(105,20);
ss3.strokeStyle="blue";
ss3.stroke();

$('#s4').slideDown('fast',function(){

var ss4=cc.getContext("2d");

ss4.beginPath();
ss4.moveTo(105+15,0+5);
ss4.lineTo(105,20);
ss4.strokeStyle="blue";
ss4.stroke();

$('#s5').slideDown('fast',function(){

var ss5=cc.getContext("2d");

ss5.beginPath();
ss5.moveTo(105+18,0+10);
ss5.lineTo(105,20);
ss5.strokeStyle="blue";
ss5.stroke();

$('#s6').slideDown('fast',function(){

var ss6=cc.getContext("2d");

ss6.beginPath();
ss6.moveTo(105+19,0+15);
ss6.lineTo(105,20);
ss6.strokeStyle="blue";
ss6.stroke();


$('#s7').show('fast',function(){

var ss7=cc.getContext("2d");

ss7.beginPath();
ss7.moveTo(105+20,20);
ss7.lineTo(105,20);
ss7.lineWidth="1.5";
ss7.shadowBlur=1;
ss7.strokeStyle="blue";
ss7.stroke();


$('#s8').slideDown('fast',function(){

var ss8=cc.getContext("2d");

ss8.beginPath();
ss8.moveTo(105+19,25);
ss8.lineTo(105,20);
ss8.strokeStyle="blue";
ss8.stroke();

$('#s9').slideDown('fast',function(){

var ss9=cc.getContext("2d");

ss9.beginPath();
ss9.moveTo(105+18,30);
ss9.lineTo(105,20);
ss9.strokeStyle="blue";
ss9.stroke();

$('#s10').slideDown('fast',function(){

var ss10=cc.getContext("2d");

ss10.beginPath();
ss10.moveTo(105+15,30+5);
ss10.lineTo(105,20);
ss10.strokeStyle="blue";
ss10.stroke();

$('#s11').slideDown('fast',function(){

var ss11=cc.getContext("2d");

ss11.beginPath();
ss11.moveTo(105+10,37);
ss11.lineTo(105,20);
ss11.strokeStyle="blue";
ss11.stroke();

$('#s12').slideDown('fast',function(){

var ss12=cc.getContext("2d");

ss12.beginPath();
ss12.moveTo(105+5,39);
ss12.lineTo(105,20);
ss12.strokeStyle="blue";
ss12.stroke();

$('#s13').slideDown('fast',function(){

var ss13=cc.getContext("2d");

ss13.beginPath();
ss13.moveTo(105,40);
ss13.lineTo(105,20);
ss13.strokeStyle="blue";
ss13.stroke();



$('#s14').slideDown('fast',function(){

var ss14=cc.getContext("2d");

ss14.beginPath();
ss14.moveTo(105-5,39);
ss14.lineTo(105,20);
ss14.strokeStyle="blue";
ss14.stroke();

$('#s15').slideDown('fast',function(){

var ss15=cc.getContext("2d");

ss15.beginPath();
ss15.moveTo(105-10,37);
ss15.lineTo(105,20);
ss15.strokeStyle="blue";
ss15.stroke();

$('#s16').slideDown('fast',function(){

var ss16=cc.getContext("2d");

ss16.beginPath();
ss16.moveTo(105-15,30+5);
ss16.lineTo(105,20);
ss16.strokeStyle="blue";
ss16.stroke();

$('#s17').slideDown('fast',function(){

var ss17=cc.getContext("2d");

ss17.beginPath();
ss17.moveTo(105-18,30);
ss17.lineTo(105,20);
ss17.strokeStyle="blue";
ss17.stroke();

$('#s18').slideDown('fast',function(){

var ss18=cc.getContext("2d");

ss18.beginPath();
ss18.moveTo(105-19,25);
ss18.lineTo(105,20);
ss18.strokeStyle="blue";
ss18.stroke();


$('#s19').show('fast',function(){

var ss19=cc.getContext("2d");

ss19.beginPath();
ss19.moveTo(105-20,20);
ss19.lineTo(105,20);
ss19.lineWidth="1.5";
ss19.shadowBlur=1;
ss19.strokeStyle="blue";
ss19.stroke();


$('#s20').slideDown('fast',function(){

var ss20=cc.getContext("2d");

ss20.beginPath();
ss20.moveTo(105-19,0+15);
ss20.lineTo(105,20);
ss20.strokeStyle="blue";
ss20.stroke();

$('#s21').slideDown('fast',function(){

var ss21=cc.getContext("2d");

ss21.beginPath();
ss21.moveTo(105-18,0+10);
ss21.lineTo(105,20);
ss21.strokeStyle="blue";
ss21.stroke();

$('#s22').slideDown('fast',function(){

var ss22=cc.getContext("2d");

ss22.beginPath();
ss22.moveTo(105-15,0+5);
ss22.lineTo(105,20);
ss22.strokeStyle="blue";
ss22.stroke();

$('#s23').slideDown('fast',function(){

var ss23=cc.getContext("2d");

ss23.beginPath();
ss23.moveTo(105-10,0+2);
ss23.lineTo(105,20);
ss23.strokeStyle="blue";
ss23.stroke();

$('#s24').slideDown('fast',function(){

var ss24=cc.getContext("2d");

ss24.beginPath();
ss24.moveTo(105-5,0+1);
ss24.lineTo(105,20);
ss24.strokeStyle="blue";
ss24.stroke();

$('#sfc').animate({width:"210px",height:"40px"},1000,function(){
$('#grc').animate({width:"210px",height:"40px"},1000,function(){


$('#br').animate({marginTop:"-400px"},5000,function(){
$('#name').slideDown(1000);

});

});
});


});
});
});
});

});
});
});
});
});





});
});
});
});
});

});
});
});
});
});

});
});
});
});

});
});



});
});
});

});

});

});
});

}</script>