金品妤Javascript執行三角函數繪圖

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

以上程式碼

<style>BUTTON{BORDER:#FF00FF 5PX SOLID;}H1{BACKGROUND-COLOR:YELLOW;}</style>

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

<button onclick="LH()">金品妤執行</button>

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

<script>

function LH()

{

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

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

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

var x = 0;

var y = 200;

var z = 10;

var h = 100;

cty.beginPath();//Canvas繪製線

cty.lineWidth = 9;//線寬度width 

cty.moveTo(x,y);//從(x,y)開始

while (x < 1000){

  x = x + 1;

  y = 200 - h * Math.sin(0.05*x);//200相當於橫軸,電腦座標自上而下

  cty.lineTo(x, y);

  cty.strokeStyle = "#00BBFF";

  cty.stroke();

   };

}

</script>

在Blog繪製三角函數

利用powerpoint插入文字動畫製作mp4