Javascript html5画布将线条更改为圆形

我想画一个矩形/正方形，如果我拖动矩形的任何一边，那么矩形的那一边应该变成圆形，如第一幅图所示
我设法用二次曲线画出了一个边可拉伸的矩形/正方形，但问题是，当我拉伸矩形的边时，它不会拉伸成圆形，而是像第二张图中所示的那样拉伸成椭圆或其他形状。
我知道你可能会建议使用贝塞尔曲线，但我想要像二次曲线一样的单一控制点，但贝塞尔有两个（如果我错了，请纠正我）

请向我建议解决这个问题的最佳方法

图像-我想要的

形象-我所取得的成就

我所做的
这显示了我的工作成果。
要绘制矩形，只需在画布上单击并拖动鼠标即可

---

贝塞尔曲线的阶数越高，需要的控制点越多。二次曲线是二阶贝塞尔曲线，它们需要一个控制点。具有两个控制点的贝塞尔曲线为三阶曲线。一阶贝塞尔曲线实际上是一条直线。任何有限阶的贝塞尔曲线都不能构成完美的圆弧

顺便说一句，二次曲线不是一个“椭圆或其他东西”，而是一个抛物线段

如果你想有圆弧，你应该使用。。。圆弧！要控制它，你需要改变半径，事实上你可以通过移动圆心来实现

您需要额外的逻辑来处理直线，因为圆弧从来都不是直线。因此，如果拖动点位于直线上方，您将绘制一条直线，如果不是，您将绘制具有适当半径的圆弧

那么，假设您有以下情况：

其中，

ab

段是矩形的直线，

acb

段是所需的圆弧

y

是管段的高度，

x

是阻力的水平偏移量。我们正在寻找

r

由

a

、

c

和

b

三个点定义的圆半径

现在角度

sda

是一个转角/4，

sd

是

r-x

，

ad

是

y/2

。如果我们使用毕达哥拉斯的理论，我们会得到：

r^2 = (r-x)^2 + (y/2)^2
=>
r^2 = (r-x)(r-x) + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y/2)^2
=>
r^2 = r^2 - 2rx + x^2 + (y^2/4)
=>
0 = - 2rx + x^2 + (y^2/4)
=>
2rx = x^2 + (y^2/4)
=>
r = (x^2 + (y^2/4)) / 2x
=>
r = ((x^2) / 2x) + ((y^2/4) / 2x)
=>
r = (x/2) + ((y^2/4) / 2x)
=>
r = (x/2) + (y^2/8x)

正如您所看到的，当

x

为0时，我们将除以0。这就是为什么当这种情况发生时，您必须切换到绘制直线

我们找到了公式（

r=（x/2）+（y^2/8x）

），您将能够确定绘制圆弧的圆半径。找到中心点很简单

要找到角度，你可以根据自己的喜好使用正弦定律或余弦定律，两者都很好。您可以选择使用三角形

asb

、三角形

asd

或三角形

adc

（绿色）来查找角度

对于简单的方法，让我们继续使用三角形

asd

，并使用正弦定律：

r / sin(turn/4) = (y/2) / sin(θ/2)

由于四分之一圈的正弦为1，我们可以将其替换为：

=>
r / 1 = (y/2) / sin(θ/2)
=>
1 = (y/2) / sin(θ/2)

现在，求解角度：

=>
sin(θ/2) = (y/2)
=>
θ/2 = asin(y/2)

调用函数绘制圆弧时，起始角为-θ/2，结束角为θ/2

---

注意：所有这些都是为矩形的右侧所做的，其他侧需要进行调整。

您能给我们看一下您到目前为止的JavaScript代码吗？@rink.attendant.6：我已经编辑了这个问题，并在这里显示了我的所有代码。贝塞尔曲线的阶数越高，它需要的控制点就越多。二次曲线是二阶贝塞尔曲线，它们需要一个控制点。具有两个控制点的贝塞尔曲线为三阶曲线。一阶贝塞尔曲线实际上是一条直线。任何有限阶的贝塞尔曲线都不能构成完美的圆弧。[抄送答案]