Question

我正试图让一个简单的矩形沿着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)));
}

这是小提琴：http://jsfiddle.net/5wevQ/1/

Answer 1

由于您的代码没有时间限制（为了使实时频率工作），您需要先定义一个宽度代表一个周期（@ 1 Hz，如果您愿意，则为1秒）。

让我们说整个画布宽度代表一个循环然后我们可以这样做：

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

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

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

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

您需要调整的下一件事是如何使用返回的正弦值。截至目前，您只是在积累价值。这将产生延迟，因此更好的方法是将返回值视为绝对值，因为您已经使用了它的振幅。

所以改变这一行：

dotY += sineY(dotX);

到

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

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

这个小提琴显示每个画布宽度20个周期，因为频率设置为20 Hz。

<强> FIDDLE

（ps：我这里没有解决阶段）

希望这有帮助！

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

1 个答案: