固定长度的Javascript画布曲线

我想绘制任意（随机）曲线，给定：

• 起点
• 终点
• 曲线长度

我怎么能做这样一件事，受限于画布的边界，再加上无法跨越的曲线。我试图找到一些解决办法，但我想不出来。谢谢你抽出时间

下面是我想要完成的更详细的视图：

这是在画布上绘制的二次曲线。一切都很好。问题是，如何在不使用所有点的情况下绘制此图，仅使用像素的固定长度、随机点，以画布大小和非交叉为边界

代码可能如下所示：

function fixedCurve( A, B, length ){
    for(int i = A; i < B; i++){
        //Calculate random point with propper distance to get first base point, random direction could be calculated before loop.
        //Basicly this loop should calculate integrate of the curve and draw it each step.
    }
}

函数固定曲线（A、B、长度）{
for（int i=A；i

试试这个（）：

这是使用

quadraticCurveTo

绘制一条二次曲线，给定两个点，并计算曲线中点上方20到100像素的随机控制点

---

如果你想让二次曲线有一个特定的弧长（这听起来像是你从问题中得到的），那么我们可以。二次曲线（抛物线）的弧长为：

我们有方程，求出导数：

如果我们把它定义为u（x）：

对于一个特定的x1和x2，我们可以计算出u（x）的等价值，然后得到积分

---

使用控制点绘制一般二次曲线涉及将方程转换为顶点形式，如图所示。明智的做法是，首先用这个方程重复数学，然后用正确的术语得到一个新的‘u’方程

您有任何部分工作的代码吗？我们并不是要神奇地为你们制作一个完整的实现。我不知道如何使用曲线的长度来绘制它。我用canvas和JS来画普通的贝塞尔曲线，但这不会有帮助，最后我想是的。你对什么样的曲线感兴趣？只有贝齐尔？三次曲线还是二次曲线？对我来说没关系，只要我不穿过固定长度的曲线。问题是，从A到B的最小曲线将产生直线，但随着我们改进长度，它将混合以连接这两条曲线，长度由我们提供。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = "red";

  ctx.beginPath();
  var start = [20, 100];
  var end = [120, 100];
  var above = Math.random()*80+20;
  // find the mid point between the ends, and subtract distance above
  //   from y value (y increases downwards);
  var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];    
  ctx.moveTo(start[0], start[1]);

  ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]); 
  ctx.stroke();
}

draw();