三個Javascript函數sin,cos與canvas.font

Javascript在網頁就可以執行不需要開啟Spyder

以上程式碼

<style>BUTTON{BORDER:GREEN 5PX SOLID;BORDER-RADIUS:30PX;}</style>

<h1>Javascript在網頁就可以執行不需要開啟Spyder</h1>

<button onclick="LHsin()">sin執行</button>

<button onclick="LHcos()">cos執行</button>

<button onclick="xLine()">橫軸</button>

<canvas height="400" id="my" style="background: black;" width="1200"></canvas>

<script>

var c = document.getElementById("my");

var cty = c.getContext("2d");

var g = 0.01;//增加一個廣域變數,用在下面的Math.sin(g*x);

var h = 180;

function LHsin()

{

var x = 0;

var y = 200;

cty.beginPath(); 

cty.lineWidth = 5; 

cty.moveTo(x,y);

while (x < 1000){

  x = x + 1;

  y = 200 - h * Math.sin(g*x);

  cty.lineTo(x, y);

  cty.strokeStyle = "yellow";

  cty.stroke();

   };

}

function LHcos()

{

var x = 0;

var y = 200-h;//上面的sin是y =200這裡要改掉

cty.beginPath(); 

cty.lineWidth = 5; 

cty.moveTo(x,y);

while (x < 1000){

  x = x + 1;

  y = 200 - h * Math.cos(g*x);

  cty.lineTo(x, y);

  cty.strokeStyle = "red";

  cty.stroke();

   };

}

function xLine(){

cty.beginPath(); 

cty.lineWidth = 3; 

cty.moveTo(0,200);

    cty.lineTo(1000,200);

    cty.strokeStyle = "white";

    cty.stroke();

}

</script>