Graphics 绘制离散时间信号显示振幅调制

我试图使用

canvas

元素渲染一个简单的离散时间信号。然而，这种说法似乎不准确。正如您在代码片段中看到的，在频率达到某个阈值后，信号似乎被调幅。即使它远低于尼奎斯特极限

{
const canvas=document.querySelector（'canvas'）；
const frequencyelm=document.querySelector（“#frequency”）；
const ctx=canvas.getContext（'2d'）；
常量renderFn=t=>{
常数信号=新阵列（100）；
常数sineOfT=Math.sin（t/1000/8*Math.PI*2）*0.5+0.5；
常数频率=sineOfT*20+3；
for（设i=0；i{
常数x=i/（信号长度-1）*w；
常数y=h-（值+1）/2*h；
如果（i==0）{
ctx.moveTo（x，y）；
}否则{
ctx.lineTo（x，y）；
}
});
ctx.stroke（）；
}

@媒体（首选颜色方案：深色）{
身体{
背景色：#333；
颜色：#f6f6f6；
}
}

频率：

我觉得很合适。在较高频率下，当峰值落在两个样本之间时，采样点可能比峰值低很多

如果信号的频率仅小于奈奎斯特，则可以从其样本中重构信号。这并不意味着样本看起来像信号

只要您的信号过采样2倍或更多（或更多），您就可以通过在采样点之间使用三次插值非常精确地绘制它。例如，请参见此处的Catmull Rom插值：

可以在HTML画布中使用

bezierCurveTo

方法绘制这些插值曲线。如果需要使用直线，则应找到样本之间出现的任何最大或最小点，并将这些点包括在路径中

我已经编辑了您的代码片段，以使用带有Catmull Rom插值的

bezierCurveTo

方法，如下所示：

window.addEventListener（'load'，（）=>{
const canvas=document.querySelector（'canvas'）；
const frequencyelm=document.querySelector（“#frequency”）；
const ctx=canvas.getContext（'2d'）；
常量renderFn=t=>{
常数信号=新阵列（100）；
常数sineOfT=Math.sin（t/1000/8*Math.PI*2）*0.5+0.5；
常数频率=sineOfT*20+3；
for（设i=0；i0）{
x1=x0+dx*c；
y1=y0+（信号[i+1]-信号[i-1]）*dy*c/2；
}否则{
x1=x0；
y1=y0；
ctx.moveTo（x0，y0）；
}
如果（i<信号长度-2）{
x2=x3-dx*c；
y2=y3-（信号[i+2]-信号[i]）*dy*c/2；
}否则{
x2=x3；
y2=y3；
}
比塞尔曲线（x1，y1，x2，y2，x3，y3）；
}
ctx.stroke（）；
}

@媒体（首选颜色方案：深色）{
身体{
背景色：#333；
颜色：#f6f6f6；
}
}

频率：

我明白了，谢谢你的回答。所以我想我必须在原始样本之间进行过采样和插值，对吗？如果我没有弄错的话，线性插值在这种情况下是无用的。有什么合适的方法吗？快速的谷歌搜索让我找到了Whittaker-Shannon插值，但也许你可以对此有更多的了解。如果你想画一个好的信号，我建议进行2次过采样，然后进行任何类型的三次样条插值，以找到样本位置之间出现的任何最大值和最小值。如果你把样本点和任何最大值/最小值都包括在内，你可以在这些点之间画一条直线。你能把它们添加到你的答案中，让其他人更容易看到吗？我会把它标记为接受：）事实上，我还有两个问题。每个

3n+1

th样本通过三次样条插值进行插值，每个

3n+2

th样本对应于最大值/最小值？所以我的最终信号的样本数是原始信号的三倍，对吗？不，你过采样得到2n个样本，然后三次插值得到样本间所有点的三次多项式。（）在每对样本之间，从数学上确定是否存在最大点或最小点，如果存在，则为精确坐标。然后在2n个采样点和任何最大或最小点之间绘制线。