Skip to content

Instantly share code, notes, and snippets.

@sabha
Last active March 25, 2018 07:10
Show Gist options
  • Select an option

  • Save sabha/4c2c4e35d374ee1c1dea18ed1f3269bb to your computer and use it in GitHub Desktop.

Select an option

Save sabha/4c2c4e35d374ee1c1dea18ed1f3269bb to your computer and use it in GitHub Desktop.
Sin Cos Wave
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function draw(f,s,l, angle = 90){
ctx.beginPath();
for(x=0; x<360*2; x += 20){
ctx.moveTo(x+5,s);
ctx.lineTo(x,s);
}
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30,(s - f(0)*l));
for(x=0; x<=360; x++){
y = s - f(x*Math.PI/angle)*l;
ctx.lineTo(x+30,y);
}
ctx.stroke();
}
draw(Math.cos, 100, 45);
draw(Math.sin, 300, 45);
draw(Math.sin, 400, 20);
draw(Math.sin, 500, 45, 20);
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
@sabha
Copy link
Author

sabha commented Mar 22, 2018

screen shot 2018-03-22 at 10 43 21 am

@sabha
Copy link
Author

sabha commented Mar 25, 2018

screen shot 2018-03-25 at 2 09 51 am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment