SOURCE

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

let x = 0;
let y = 100;
let A = 10; //振幅
let w = 0.1; //角速度
let k = 100;

function moveSin() {
    // 清除画布
    // context.clearRect(0, 0, canvas.width, canvas.height)
    // 开始画线
    context.beginPath();
    context.moveTo(x, y);
    // 正弦公式：y = Asin(ωx+φ) + k
    y = A * Math.sin(w * x) + k;
    x++;
    context.lineTo(x, y);
    context.stroke();
    // 持续渲染
    requestAnimationFrame(moveSin);
}

moveSin();

<canvas id="canvas" ></canvas>