Animating the drawn line - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

Animating the drawn line

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//  w  w w  .j  a  va  2 s . c om
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var lerp=function(a,b,x){ return(a+x*(b-a)); };
    var pct=0;
    animate();
    function animate(){
        if(pct<100){requestAnimationFrame(animate);}
        var x=lerp(0,cx*2,pct/100);
        drawLine(0,cy,x,cy);
        pct++;
    }
    function drawLine(x0,y0,x1,y1){
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        ctx.lineTo(x1,y1);
        ctx.stroke();
    }
});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials