在html5画布中重新创建音频滤镜曲线

Question

如果我想编写各种音频滤镜的曲线，我应该使用哪些工具在画布中构建它们？

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();

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

如果是这种情况之一，您应该使用预先计算的曲线。贝塞尔曲线适用于此类工作。

如果您需要曲线动态并且遇到上述性能问题，那么您需要找到一位数学家并找出如何将独立函数映射到Bezier曲线。这可以做到，但需要相当数量的代数。