Javascript的輸出字體.font與fillStyle與fillText

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

以上原始程式碼

<style>BUTTON{BORDER:GREEN 10PX SOLID;BORDER-RADIUS:30PX;FONT-SIZE:30PX;COLOR:BLUE;}</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);//數學Math正弦sin

  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(1100,200);cty.lineTo(1050,190);cty.lineTo(1050,200);

    cty.strokeStyle = "white";

    cty.stroke();

    cty.font= "60px Georgia";

    cty.fillStyle = "white";

    for ( i = 0; i < 11; i++) 

      cty.fillText(i, i/g, 240);

}

</script>

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1ZEA-R9ZBunWYuSbvWJCUlqcltUgoO9nDxbxt_Esxs052jZcmeqOhD3oUm9Wq5FHeSztKq1QVSr2nWYJh5cR1s0iIAA2mj1B0QjC1kiVWF6oZ_UnuezJX7JPTFjRH7kOrOIX_Sg5UNZwqCklicI4yRRIQ1sfOp9kScIq2o63ZaCnq3C9Gl_c5At-DvA/s1600/%E5%9C%96%E7%89%871.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2196" data-original-width="3359" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1ZEA-R9ZBunWYuSbvWJCUlqcltUgoO9nDxbxt_Esxs052jZcmeqOhD3oUm9Wq5FHeSztKq1QVSr2nWYJh5cR1s0iIAA2mj1B0QjC1kiVWF6oZ_UnuezJX7JPTFjRH7kOrOIX_Sg5UNZwqCklicI4yRRIQ1sfOp9kScIq2o63ZaCnq3C9Gl_c5At-DvA/s1600/%E5%9C%96%E7%89%871.jpg"/></a></div>

<iframe width="560" height="315" src="https://www.youtube.com/embed/QiDaMpjVgB0?si=gp4zkDJI-5F3Shyk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>