在 html5 canvas 中重新创建音频滤波器曲线

Question

如果我想编写各种音频滤波器的曲线，我应该使用什么工具来构建它们canvas？

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

我的想法是：

• quadraticCurveTo
• bezierCurveTo
• 自定义曲线使用 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 非常大。

如果是其中任何一种情况，您可能应该使用 pre-computed 曲线。贝塞尔曲线适用于此类工作。

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