绘制离散时间信号会显示幅度调制

问题描述

我正在尝试使用canvas元素来渲染简单的离散时间信号。但是，表示似乎不准确。如您在代码段中所见，在频率达到某个阈值之后，信号出现进行了幅度调制。即使它远低于<50Hz的奈奎斯特极限（在此示例中，假设采样率为100Hz）。对于5Hz这样的非常低的频率，它看起来非常好。

我将如何正确呈现此图像？它适用于更复杂的信号（例如歌曲的波形）吗？

window.addEventListener('load',() => {
  const canvas = document.querySelector('canvas');
  const frequencyElem = document.querySelector('#frequency');
  const ctx = canvas.getContext('2d');

  const renderFn = t => {
    const signal = new Array(100);
    const sineOfT = Math.sin(t / 1000 / 8 * Math.PI * 2) * 0.5 + 0.5;
    const frequency = sineOfT * 20 + 3;

    for (let i = 0; i < signal.length; i++) {
      signal[i] = Math.sin(i / signal.length * Math.PI * 2 * frequency);
    }

    frequencyElem.innerText = `${frequency.toFixed(3)}Hz`

    render(ctx,signal);
    requestAnimationFrame(renderFn);
  };

  requestAnimationFrame(renderFn);
});

function render(ctx,signal) {
  const w = ctx.canvas.width;
  const h = ctx.canvas.height;

  ctx.clearRect(0,w,h);

  ctx.strokeStyle = 'red';
  ctx.beginPath();

  signal.forEach((value,i) => {
    const x = i / (signal.length - 1) * w;
    const y = h - (value + 1) / 2 * h;

    if (i === 0) {
      ctx.moveTo(x,y);
    } else {
      ctx.lineTo(x,y);
    }
  });

  ctx.stroke();
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #f6f6f6;
  }
}

<canvas></canvas>
<br/>
Frequency: <span id="frequency"></span>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

graphics rendering signal-processing