javascript - 在 html5 Canvas 中重新创建音频滤波器曲线

Question

如果我想对各种音频滤波器的曲线进行编程，我应该使用什么工具在 Canvas 中构建它们？

http://raider.mountunion.edu/~miskeljp/ds/resources/filters/filter_types.jpg

我的想法是:

• 二次曲线至
• 贝塞尔曲线转
• 使用 Math.sin 自定义曲线

由于我仍然缺乏经验，我希望有人能告诉我最好的方法是什么。

Answer 1

二次曲线、贝塞尔曲线和正弦曲线不太可能很好地拟合滤波器曲线。它们可以被拼凑到位，但我不推荐这样做。

如果这些曲线应该是动态的，我建议找到滤波器的实际函数，并根据需要多次使用 lineTo(x,y)。

如果您已将数学函数编程为 JavaScript 函数，则可以执行以下操作。

context.beginPath();
for(var i = startX; i<endX; i++)
    context.lineTo(i, myCurve(i));
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();

不这样做的唯一原因是如果您担心性能问题或者您的 Canvas 非常大。

如果是这种情况，您可能应该使用预先计算的曲线。贝塞尔曲线非常适合此类工作。

如果您需要曲线动态并且遇到上述性能问题，您需要找到一位数学家并找出如何将独立函数映射到贝塞尔曲线。这是可以做到的，但需要大量的代数知识。