sin cos graph animation - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

sin cos graph animation

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>

body{ background-color: ivory; }
#canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/* www.  java 2  s .c  o m*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var data=[];
    for(var i=0;i<5000;i++){
        data.push(Math.sin(i/10)*70+100);
    }
    var x=0;
    var panAtX=250;
    var continueAnimation=true;
    animate();
    function animate(){
        if(x>data.length-1){return;}
        if(continueAnimation){
            requestAnimationFrame(animate);
        }
        if(x++<panAtX){
            ctx.fillRect(x,data[x],1,1);
        }else{
            ctx.clearRect(0,0,canvas.width,canvas.height);
            // plot data[] from x-PanAtX to x
            for(var xx=0;xx<panAtX;xx++){
                var y=data[x-panAtX+xx];
                ctx.fillRect(xx,y,1,1)
            }
        }
    }
    $("#stop").click(function(){continueAnimation=false;});
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <button id="stop">Stop</button>
      <br> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials