cos curve on html Canvas



var y =125 - 120*( Math.cos(( 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()Simple Sine curve
sin()sine curve in slow motion
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");
/////// Axis //////
gctx.beginPath();
gctx.lineWidth=3;
gctx.shadowColor = '#ffffff';
gctx.strokeStyle= '#0060c0';
gctx.moveTo(0, 125); 
gctx.lineTo(595,125); // Horizontal X Axis 
gctx.moveTo(10, 2);
gctx.lineTo(10,248);  // Vertical Y Axis
gctx.stroke(); 
////////Axis end///
gctx.beginPath();

for (var angle = 0; angle <590; angle+=5){
var y =125 - 120*( Math.cos(( Math.PI/180 ) * angle))
var x=10 + angle;
gctx.lineTo(x,y);
}
gctx.strokeStyle= '#f00000';
gctx.stroke();

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