Javascript 如何将二次曲线切成两半？

我正在尝试绘制现有二次曲线的一半，但我不确定如何调整控制点以实现此目的：

您将看到在画布中绘制的圆形矩形的上半部分，以及带有顶部CSS边框的框。我要做的是用画布复制css绘制的框，换句话说，将角切成两半

我一直在搞乱起点&第一个控制点，但不知道如何准确地拼接曲线

我知道画布不会完全匹配CSS，这很好，我不想让它匹配。我正试图准确地画出曲线的一半，而不改变它的形状。我对这背后的数学比这个具体例子的解决方案更感兴趣

更新示例：

---

你可以看到，虽然很接近，但我试图绘制的曲线与原始曲线不太匹配…

我不太擅长这一点，因此，请给出建议

Mozilla的一个很好的例子：

wiki中的二次函数：

通过阅读上面的链接，我们知道，

当前位置

是起点，

控制点

是永远无法到达的点，而是越来越近的点，我们需要一个终点。当我们有了它们，我们得到了一条曲线

在您的问题中，我们“调整

控制点”

，如下所示：

      ctx.moveTo          ( 15, 11 );
      ctx.quadraticCurveTo( 16, 10, 20, 10 );
      ctx.lineTo          ( 95, 10 );

      ctx.moveTo          ( 100, 11);
      ctx.quadraticCurveTo( 99, 10, 95, 10 );

      ctx.lineWidth = 10;
      ctx.stroke();

看起来不错。

作为我项目的一部分，我需要能够画一个圆角矩形

我使用贝塞尔曲线来近似四分之一圆，而不是二次曲线来绘制角点。我已经根据我的代码创建了一个小提琴来绘制圆形矩形。在函数“圆角矩形左”中，顶部、宽度和高度是边界矩形的参数，半径是角弧的半径。我想，这个函数可以改为使用圆弧或二次曲线

注：1我对该方法的参考来自于该问题答案中的第二个链接

注2：我的方法从绘制水平顶线开始，并绘制完整曲线。如果你想在曲线中间开始画一半的曲线，你就需要读< /P> 注3：我使用贝塞尔曲线而不是圆弧，因为它使绘图和变换函数更容易编写，因为它们只需要考虑lineTo和bezierCurveTo，无论我绘制的是什么形状

---

注3：我的项目的源代码位于

你能生成你想要的图像吗？@GabrielSantos——我想要一些与我发布的示例非常接近的东西，但示例不是完美的。刚刚发布了最新消息