Javascript 如何可视化具有自定义频率和振幅的正弦波？

我试图在画布上绘制一个正弦波：我想控制频率，就像我说的：

10个频率，我想看到10个周期，振幅相同的振荡波，等等

目前10个频率正常，但如果我说49个频率，我会看到振幅的奇怪变化。这是什么原因造成的？我的错误是什么

在本例中，我将两个不同的波重叠以节省空间

let element=document.getElementById（'app'）；
让canvas=document.createElement（'canvas'）；
画布宽度=320；
高度=180；
让bounds=element.getBoundingClientRect（）；
canvas.style.width=bounds.width+'px'；
canvas.style.height=bounds.height+'px'；
元素。追加子元素（画布）；
设ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=‘红色’；
ctx.fillStyle='黑色'；
ctx.fillRect（0,0320,180）；
设点=[]；
功能fSin（频率、振幅）{
返回x=>
数学sin（x/100*频率*Math.PI*2）*振幅；
}
函数生成（ff）{
设res=[]；
for（设i=0；i<100；i++）{
（i，ff（i）]；
}
返回res；
}
函数绘图点（点，xscale=1，yscale=1）{
ctx.moveTo（点[0][0]*xscale，90点[0][1]*yscale）；
for（设i=1；i
#应用程序{
宽度：90vw；
高度：90vh；
保证金：自动；
}
#应用程序画布{
保证金：自动；
}
由于采样率（捕捉点的位置）和正弦函数之间的相互作用，您看到的只是一种错觉。如果要放大并在点之间添加更多，您会看到它仍然是一个常规正弦函数。由于采样和将这些采样与直线连接而忽略中间点会扭曲实际曲线

为了好玩，我稍微修改了你的代码并添加了一个滑块。在这个版本中，取而代之的是绘制单像素点，滑块允许以交互方式调整频率。随着频率的增加/减少，您可以看到样本似乎形成了奇怪的模式


let element=document.getElementById（'app'）；
让canvas=document.createElement（'canvas'）；
画布宽度=320；
高度=180；
canvas.style.width='320px'；
canvas.style.height='180px'；
设ctx=canvas.getContext（'2d'）；
元素。追加子元素（画布）；
功能fSin（频率、振幅）{
返回x=>Math.sin（x/100*freq*Math.PI*2）*振幅；
}
让slider=document.createElement（'input'）；
slider.type='range'；
slider.min=0；
slider.max=100；
slider.addEventListener（'change'，（）=>{
const frequency=slider.value；
ctx.fillStyle='黑色'；
ctx.fillRect（0,0320,180）；
ctx.strokeStyle=‘红色’；
ctx.fillStyle='红色'；
常数ff=fSin（频率，10）；
for（设i=0；i
#应用程序{
宽度：90vw；
高度：90vh；
保证金：自动；
}
#应用程序画布{
保证金：自动；
}
在你的版本中，振幅是恒定的，你能让它看起来是可变的吗？看看49的频率，想象一下现在在每个点之间画线。它们会以上升和下降的幅度上下摆动。在原始代码中，横轴上只有100个点，因此扭曲整个图片的样本更少。