sine curve in slow motion on Canvas



Watch both sine and cos Curve in slow motion while plotting on Canvas

var y =125 - 120*( Math.sin(( Math.PI/180 ) * angle))
angle is the variable in degree

Drawing Curves , Graphs , Grids on Canvas

CODEDetails
sin()Simple Sine curve
cos()cos() curve
sin() & cos()Both curves with grid and shadow effect
sin() & cos()Both curves in slow motion
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath();
gctx.lineWidth=2;
gctx.strokeStyle= '#0060c0';

gctx.moveTo(0, 125);
gctx.lineTo(595,125);
gctx.moveTo(10, 10);
gctx.lineTo(10,245);

gctx.stroke();

gctx.beginPath();
gctx.moveTo(10, 125);
gctx.lineWidth=1;
gctx.strokeStyle= '#f00040';
var angle=0;	
my_function=function my_function(){	
var y =125 - 120*( Math.sin(( Math.PI/180 ) * angle))
var x=10 + angle;
$('#t1').html("Angle : " + angle);
gctx.lineTo(x,y);
gctx.stroke();
my_function2();
}

my_function2=function my_function2(){
if(angle <=590){	
angle=angle+1;
}else{angle=0;
gctx.moveTo(10, 100);
clearTimeout(mytime)
}

my_time=setTimeout('my_function()',50)
}

my_function2();

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer