固定长度的Javascript画布曲线答案

【问题标题】：Javascript canvas curve with fixed length固定长度的Javascript画布曲线
【发布时间】：2013-03-16 03:33:38
【问题描述】：

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

起点
终点
曲线长度

这种受画布边界限制的事情怎么办，加上曲线不能交叉。我试图找到一些解决方案，但我无法弄清楚。感谢您的宝贵时间。

这里是我想要完成的更详细的视图：

这是在画布上绘制的二次曲线。一切安好。问题是，如何在没有所有点的情况下绘制它，只需以像素为单位的固定长度、随机点、以画布大小为界且不交叉。

代码可能如下所示：

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.
    }
}

【问题讨论】：

你有部分工作的代码吗？我们不仅会神奇地为您生成完整的实现。
我不知道如何使用曲线的长度来绘制它。我得到了画布和 JS 来绘制正常的贝塞尔曲线，但这无济于事，最后我这么认为。
你对什么样的曲线感兴趣？只有贝塞尔？三次还是二次？
对我来说没关系，只要我不会穿过固定长度的曲线。问题是，最小 A 到 B 曲线会产生直线，但随着我们增加长度，它会混合以连接这两个，我们提供的长度。

标签： javascript math curve

【解决方案1】：

试试这个 (fiddle)：

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();

这是使用quadraticCurveTo 绘制二次曲线，给定两个点并计算曲线中点上方 20 到 100 像素的随机控制点。

如果您希望二次方具有特定的弧长（听起来您可能从问题中），那么我们可以do some maths。二次（抛物线）的弧长为：

我们有方程，所以求导数：

因此，如果我们将其定义为 u(x)，Wolfram alpha gives us:

因此，对于特定的 x1 和 x2，我们可以计算出 u(x) 的等价值，然后得到积分。

如您在this tutorial page 上所见，使用控制点绘制一般二次方程涉及将方程转换为顶点形式。明智的做法是从该等式开始重复数学运算，并以正确的术语为“ u”获得一个新的等式。

【讨论】：