Javascript html二次曲线的中心点

我使用

context.quadraticCurveTo（controlX，controlY，endX，endY）在html画布上绘制了一条二次曲线

我有控制点，起点和终点，它们不一定是水平的

如何使用这些参数找到曲线上的中心点

实际上我想在这个中心点上加一个div标签。
这个过程中涉及到方程求解吗？
这里有一页描述了二次方程及其解：。
这是一个关于这个主题的很好的教程，包括图表：
quadraticCurveTo
绘制一个曲线

计算曲线上任意给定位置（从0到1）点坐标的公式如下

x(t) = (1-t)^2 * x1 + 2 * (1-t) * t * x2 + t^2 * x3
y(t) = (1-t)^2 * y1 + 2 * (1-t) * t * y2 + t^2 * y3

其中（x1，y1）为起点，（x2，y2）为控制点，（x3，y3）为终点

因此，将其转换为JavaScript，我们最终得到如下内容

function _getQBezierValue(t, p1, p2, p3) {
    var iT = 1 - t;
    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
    return {
        x:  _getQBezierValue(position, startX, cpX, endX),
        y:  _getQBezierValue(position, startY, cpY, endY)
    };
}

如果将起点、终点和控制点传递到
getQuadraticCurvePoint
，以及中间位置的
0.5
，则应获得具有X和Y坐标的对象

例子

函数_getQBezierValue（t、p1、p2、p3）{
var iT=1-t；
返回它*iT*p1+2*iT*t*p2+t*t*p3；
}
函数getQuadraticCurvePoint（startX、startY、cpX、cpY、endX、endY、position）{
返回{
x:_getQBezierValue（位置、起始位置、cpX、结束位置），
y:_getQBezierValue（位置、起始、cpY、结束），
};
}
var位置=0.0；
var startPt={x:120，y:10}；
var-controlPt={x:410，y:250}；
var-endPt={x:10，y:450}；
var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
函数drawNextPoint（）{
var pt=getQuadraticCurvePoint(
startPt.x，
开始，
控制点x，
控制点y，
(完)，
(完)，
立场,，
);
位置=（位置+0.006）%1.0；
ctx.fillStyle=“rgba（255,0,0,0.5）”；
ctx.fillRect（第x-2部分，第y-2、5、5部分）；
}
ctx.strokeStyle=“黑色”；
ctx.moveTo（startPt.x，startPt.y）；
ctx.二次曲线（控制点x，控制点y，端点x，端点y）；
ctx.stroke（）；
设置间隔（drawNextPoint，40）
一种可能的方法：

// compute coordinates of the middle point of a quadratic Bezier curve
// need two functions: quadraticBezierCurvePoint and quadraticBezierCurvesMiddle

function quadraticBezierCurvePoint(t, c) {
  // compute relative coordinates of a point on the curve using t and c
  // t is a number between 0 and 1
  // c is an array of 3 points:
  //     the initial point of the curve (always (0,0))
  //     the "handle" point of the curve
  //     the final point of the curve
  var t1, t1_2a, t1_2b, t1_2c;
  t1 = 1 - t;
  t1_2a = t1 * t1;
  t1_2b = (2 * t) * t1;
  t1_2c = t * t;
  return {
    x: (c[0].x * t1_2a) + (t1_2b * c[1].x) + (t1_2c * c[2].x),
    y: (c[0].y * t1_2a) + (t1_2b * c[1].y) + (t1_2c * c[2].y)
  };
}

function quadraticBezierCurvesMiddle(m, c) {
  var k, km = 1000,
    km2 = (km >> 1),
    len = 0,
    len2, x, y, a = new Array(km + 1);
  // compute curve lengths from start point to any point
  // store relative point coordinates and corresponding length in array a
  for (k = 0; k <= km; k++) {
    a[k] = {
      pt: quadraticBezierCurvePoint(k / km, c),
      len: 0
    };
    if (k > 0) {
      x = a[k].pt.x - a[k - 1].pt.x;
      y = a[k].pt.y - a[k - 1].pt.y;
      a[k].len = a[k - 1].len + Math.sqrt(x * x + y * y);
    }
  }
  // retrieve the point which is at a distance of half the whole curve length from start point
  // most of the time, this point is not the one at indice km2 in array a, but it is near it
  len2 = a[km].len / 2;
  if (a[km2].len > len2)
    for (k = km2; k >= 0; k--) {
      if (len2 >= a[k].len) break;
    } else
    for (k = km2; k <= km; k++) {
      if (len2 <= a[k].len) break;
    }
    // return absolute coordinates of the point
  return {
    x: Math.round((a[k].pt.x + m.x) * 100) / 100,
    y: Math.round((a[k].pt.y + m.y) * 100) / 100
  };
}

//计算二次贝塞尔曲线中点的坐标
//需要两个函数：二次BezierCurvePoint和二次BezierCurvesMiddle
函数二次Bezier曲线点（t，c）{
//使用t和c计算曲线上点的相对坐标
//t是介于0和1之间的数字
//c是由3个点组成的数组：
//曲线的初始点（始终为（0,0））
//曲线的“句柄”点
//曲线的终点
变量t1，t1_2a，t1_2b，t1_2c；
t1=1-t；
t1_2a=t1*t1；
t1_2b=（2*t）*t1；
t1_2c=t*t；
返回{
x：（c[0].x*t1_2a）+（t1_2b*c[1].x）+（t1_2c*c[2].x），
y：（c[0].y*t1_2a）+（t1_2b*c[1].y）+（t1_2c*c[2].y）
};
}
函数二次Bezier曲线中间（m，c）{
变量k，km=1000，
平方公里=（公里>>1），
len=0，
len2，x，y，a=新阵列（km+1）；
//计算从起点到任意点的曲线长度
//在数组a中存储相对点坐标和相应的长度
对于（k=0；k0）{
x=a[k].pt.x-a[k-1].pt.x；
y=a[k].pt.y-a[k-1].pt.y；
a[k].len=a[k-1].len+Math.sqrt（x*x+y*y）；
}
}
//检索距离起点为整个曲线长度一半的点
//大多数情况下，该点不是阵列a中标记km2处的点，但它在附近
len2=a[km].len/2；
如果（a[km2]。len>len2）
对于（k=km2；k>=0；k--）{
如果（len2>=a[k].len）中断；
}否则
对于（k=km2；k），请解释您所说的“控制点”、“起点”和“终点”是什么意思点。控制点是一个负责曲线形状的点，起点是曲线开始的点，终点是曲线结束的点。没有任何一个点可以负责曲线的形状-曲线的形状是由a、b、c的值定义的，当以一般形式写入时。您的起点和终点是ey水平线？你们有一个你们正在绘制的方程吗？请看一下qudraticCurveTo（a，b，c）htmlcanvas/javascript中的函数。它根据控制点和端点绘制曲线这一页我知道，我也在看它，但我想用javascript计算中心点。我不知道如何找到中心点。如果起点和终点在水平方向上是水平的，那么t的x坐标He曲线将直接位于中间（即）XyStask+（（Xy-X-XYSTART）/ 2）y坐标可以通过将这个x值代入原始方程，而不是x，然后求解得到。你有方程吗？这是真正的问题。我有随机的起点和终点。曲线从哪里来？你有描述它的方程吗？