JavaScriptでアニメ – 1 サインカーブ

<meta charset="utf-8">
<title>正弦波のアニメーション</title>
 
<style>
*{ margin: 0px; padding: 0px; }
#canvas { background-color: #dcdcdc; }
</style>
 
<p>HTML & JavaScriptであなたが指定する周波数のサインカーブを描きます。<br>
入力は何回でもできます。0.0 以上の実数が可能。<br>
（残念ながら、Python では、まだできませんでした。(2022.04.18)）<br>
</p>
<p><label>周波数(Hz=波数/sec)は？：　
<input type="text" id="Hzinput"></label>
<input type="button" value="入力" onclick="onClick();">
    </p><p>入力値: <span class="area">確認のため入力値がここに表示されます。</span></p>
<canvas id="canvas" width="600" height="500"></canvas>

<script>
function escapeHTML(string){
    return string.replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, "'");
    }

function onClick(){
    //テキストボックスの値を取得
    var value = escapeHTML(document.getElementById("Hzinput").value);
    Hz = Number(value) - 0;

    //値を設定する
    document.querySelector('.area').innerHTML = value;
    if (Hz == 0){
        Hz = 0.00001;
        } // if文のおわり

window.addEventListener('click', draw, false);

function draw(){
    var r = 150; //振幅
    var T  = 200 / Hz; // 周期
    var degree = 0; //角度
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
        
    function loop() { //繰り返される関数
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 2;
        
        drawWave(degree);
    
        ctx.stroke();
 
        degree += 3; //3度づつ増やしていく
    
        requestAnimationFrame(loop);
        }  // loop() のおわり
    
    loop();
 
    function drawWave(degree) {
        ctx.moveTo(0, -r*Math.sin((2*Math.PI/T)*degree)+(canvas.height/2)); //始点
        for (var x=1; x <= canvas.width; x+= 1) {
        var y =-r*Math.sin((2*Math.PI/T)*(degree+x));
        ctx.lineTo(x, y+(canvas.height/2));
        } // for文のおわり
    } // drawWave() のおわり
 
} // draw のおわり

} // onClick のおわり
</script>