sine curve in slow motion on CanvasWatch both sine and cos Curve in slow motion while plotting on Canvas
angle is the variable in degree Drawing Curves , Graphs , Grids on Canvas
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();
This article is written by plus2net.com team.
| ||||||||||