Javascript 在画布上绘制X的正弦Y

我试图得到一个简单的矩形，沿着时间的x轴沿着正弦曲线路径。我得到了x轴的值，但是y轴的值有点复杂，我认为我的正弦公式有问题。另外，我希望y值以0开始和结束，但在本例中，0应该是canvas.height/2-5（以偏移矩形）

在下面的函数中，周期和振幅似乎起作用，但我不知道如何应用频率或相位

function sineY(x){
    var amplitude = 2.5; // wave amplitude
    var period = 4; // period
    var freq = 1; // frequency or w
    var phase = 20; // phase angle

    //Asin(wt);
    return amplitude * Math.sin(period * (Math.PI * (dotX/180)));
}

---

问题是：

由于您的代码没有时间限制（为了实时频率正常工作），您需要首先定义一个周期的宽度（@1Hz，或者如果您愿意的话是1秒）

假设整个画布宽度代表一个周期，那么我们可以这样做：

var period = x / canvas.width; // period (one cycle)

要使用该值，请将公式稍微更改为：

return amplitude * Math.sin(freq * 2 * Math.PI * period);

如果频率为1Hz，画布区域将绘制一个周期，如果频率为2Hz，则绘制两个周期，依此类推

接下来需要调整的是如何使用返回的正弦值。到目前为止，您只是在累积价值。这将产生滞后，因此更好的方法是将返回值视为绝对值，因为您已经在使用振幅

因此，改变这一行：

dotY += sineY(dotX);

到

现在，dotY将绘制相对于轴的当前正弦值，这意味着0°将从轴的0位置开始。您现在可以调整振幅等

当频率设置为20 Hz时，此小提琴显示每个画布宽度20个周期

（附言：我没有在这里提到阶段）

---

希望这有帮助

回答得好！谢谢你的解释。

dotY = canvas.height * 0.5 - 2.5 + sineY(dotX);