Canvas 参数化eq的画布bezier曲线

我试图用canvas来模拟一个参数均衡器，它的响应类似于下图中的均衡器，使用频率、共振和增益

 *****               ******`

 *****               ******`

一条直线上有8个点。每个点可以有各种曲线（低通、钟形、槽口、高通等）

 *****               ******`

我想知道如何在画布上模仿它

 *****               ******`

网上有很多发电机，就像这样- 但它们并没有真正告诉你如何沿着一条直线绘制多条曲线。 此外，例如，我见过的大多数工具都不能实现高共振——我需要为这些工具使用额外的点吗

 *****               ******`

我可以使用canvas bezierCurveTo和moveTo函数，并将每个点的XY移动输入到这些函数中

 *****               ******`

任何关于如何计算这些响应的指针都将是惊人的

 *****               ******`

干杯

 *****               ******`

K

 *****               ******`

编辑

 *****               ******`

我相信下面的用户是正确的，我需要B样条在画布中实现这一点。到目前为止，我已经尝试了一个简单的低通曲线，从右向左移动（没有任何共振）。我正在努力添加共振，它正确地模拟了低通曲线的共振（即在开始处有一个峰值，而不是在整个路径上）。e、 g

 *****               ******`

我也在努力，我需要沿着直线有8个点，一个点可以通过另一个点（从而影响B样条曲线）。我猜我需要使用

isPointInPath（）

函数来实现这一点，但在如何在我的用例中实现它的问题上仍存在困难

 *****               ******`

我猜这很难，因为之前在Canvas中还没有尝试过，而web上关于这方面的信息也很少（我可以找到大量C语言的示例）

 *****               ******`

下面是一个低通曲线的例子，我用B样条曲线做了一个小共振（但是共振不够远，峰值应该更小）

 *****               ******`

对于奇怪的编码风格，很抱歉，这不是javascript，而是一种集成了所有画布功能的基本脚本语言：

canvas_beginPath(c);
decl x0 = x[0] * 1000;
decl y0 = y[0] * 200;
decl x1 = x[1] * 200;
decl y1 = y[1] * 20;

canvas_lineTo(c,0, 10); 
canvas_moveTo(c,x0+10, 98);             
canvas_arcTo(c,x0+103, 200-y0, x0+173, 96, 73); 
canvas_lineTo(c,1000, 96);             
canvas_stroke(c);
canvas_fill(0);

canvas_beginPath(d);
canvas_moveTo(d,165, 98);            
canvas_arcTo(d,203, 95, 281, 96, 73); 
canvas_lineTo(d,1000, 96);             
canvas_stroke(d);
canvas_fill(0);

 *****               ******`

---

我还不太了解它，但从我在另一种情况下所做的事情来看（我有固定点，需要提供一条类似人类的识别曲线）

 *****               ******`

以下是我从你的问题中得到的信息：

 *****               ******`

在一个频谱上，你有一定的振幅。由于频率是一个有序集（从数字空间继承自然顺序），因此实际上您有一个样本集，需要在这些样本集之间插值以形成函数

 *****               ******`

此插值可以通过以下行进行：

 *****               ******`

*               ******    *
*          ***       **   *
*    ***                  *
**                        *

所以最终这看起来并不好

 *****               ******`

水平线还有另一种方法

 *****               ******`

`*************
******

 *****               ******`

这被数字放大器用来可视化它

 *****               ******`

你追求的是更圆的东西：

**          ****  ****
**      **    **    **
*   **              *
***                 *

好的，你只需要使用一条有四个点的BSP线

+***x
**
*
**
十***+

两个x点是该样条曲线经过的第一个点和第四个点。这两个点是表示值的点

 *****               ******`

+点是点2和点3，实际控制点1的圆度（点2这样做），点4（点3）这样做。如果将这些点放置在相同的y-achse值上，则可以使用x访问控制圆度

 *****               ******`

如果点2的x值与点4的x值相同（记住，点2控制点1的圆度），则只要点3的x值与点1的x值相同，样条曲线就会穿过中点。通过改变2和3的x值，可以轻松移动该中点。玩它

 *****               ******`

我使用100%和100%得到了非常令人愉快的结果，但最后让人们根据曲线调整这些结果。（我使用0到1之间的值）

 *****               ******`

通过使用illustrator或freehand，使用bspline工具（路径编辑），使用圆度点（在路径的每个点上拖出并移动的圆度点）并仅更改x值，您可以自己查看效果

 *****               ******`

这正是你要找的

 *****               ******`

---

如果您需要帮助或需要真实图片（我知道ascii技术不够好），请询问我将更新帖子。

参数均衡器过滤信号。你试图用曲线来显示滤波器的频率响应

 *****               ******`

一种简单的方法是计算多个不同频率下的响应（例如，可视化中每个像素列一次），以获得可视化中的一组点。然后，通过连续点绘制线段，以可视化滤波器的频率响应

 *****               ******`

---

关键是，使用实际频率响应函数沿曲线插值点以进行渲染，而不是canvas内置的对Bezier曲线的支持。

这几乎没有足够的细节来解释实际需要的内容。假装没有音频应用程序，因为你在回避自己的问题，假装画布与模拟任何东西都有关系：它只是一个绘图表面，你具体想在画布上画什么？为了获得高Q/共振，你需要在画布上添加两个额外的点。但要回答这个问题，实际上我们必须为你们解决整个问题。到目前为止你尝试了什么？如果有代码，请分享。同时检查B样条曲线（不要与贝塞尔混淆）Hi-Ken，好的点。我用更多的信息更新了我的帖子。B样条上的调用很好。嗨，迈克，各种过滤器都有非常具体的响应。我必须通过在画布上绘制它们来模仿它们。e、 g.@Ke，这会将两个不相关的东西相互渗透：在画布上绘制不会以任何方式影响您如何将过滤曲线应用于音频-因此对于画布，您只需要绘制特定的c

 *****               ******`