sine curve on html 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 variable in degree

More about Math.sin() with radian or degree as input

Drawing Curves , Graphs , Grids on Canvas

CODEDetails
sin()sine curve in slow motion
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); // Horizontal X Axis 
gctx.moveTo(10, 5);
gctx.lineTo(10,245);  // Vertical Y Axis

gctx.stroke(); 

gctx.beginPath();
gctx.moveTo(10, 125);
gctx.lineWidth=1;
gctx.strokeStyle= '#f00040';
for (var angle = 0; angle <590; angle+=1){
var y =125 - 120*( Math.sin(( Math.PI/180 ) * angle))
var x=10 + angle;
gctx.lineJoin = 'round';
gctx.lineTo(x,y);
}
gctx.stroke();

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Google+

Post Comment This is for short comments only. Use the forum for more discussions.




Subscribe to our mailing list

* indicates required
Subscribe to plus2net
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer