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

Recreating audio filter curves in html5 canvas

本文关键字：创建 音频 过滤器 曲线 html5 布中重 新创建      更新时间：2023-09-26

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

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

我的想法是：

  • quadraticCurveTo
  • 边框CurveTo
  • 使用Math.sin自定义曲线

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

二次曲线、贝塞尔曲线和正弦曲线不太可能很好地拟合滤波器曲线。它们可以争论到位，但我不建议这样做。

如果这些曲线应该是动态的，我建议找到过滤器的实际函数，并根据需要多次使用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();

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

如果是这两种情况中的任何一种，您可能应该使用预先计算的曲线。贝塞尔曲线适用于这种类型的工作。

如果你需要你的曲线动态，并且你有上述性能问题，你需要找到一位数学家，并找出如何将独立函数映射到贝塞尔曲线。这是可以做到的，但需要相当多的代数运算。

相关文章：