<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 = 195;
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(1050,200);cty.lineTo(1050,210);cty.lineTo(1080,200);cty.lineTo(1050,190);cty.lineTo(1050,200);
cty.strokeStyle = "white";
cty.stroke();
cty.font= "30px Georgia";
cty.fillStyle = "white";
for ( i = 0; i < 11; i++)
cty.fillText(i, i/g, 220);
}
</script>
留言
張貼留言