Javascript 用3个给定点绘制一条抛物线

我需要在html5画布上画一条完美的曲线/抛物线。给出了点的3{x；y}坐标。我尝试了一个BeZielCurvor或一个二次方，但曲线不会在中间点。

我想要的结果（蓝色圆点曲线和蓝色曲线）：

我得到的结果是：

代码：

      ctx.strokeStyle = '#00478a';
      ctx.lineWidth = 1.5;

      ctx.beginPath();
      ctx.moveTo(x1AtRatio, 30);
      ctx.quadraticCurveTo(criticalSectionAtRatio, 100, x2AtRatio, 30);

      ctx.stroke();

其中x1AtRatio-x2AtRatio-criticalSectionAtRatio是用户输入的给定x，30-100-30是定义坡度的y

控制点 由于曲线不会通过控制点，因此需要使用两个Bezier

控制点设置曲线从最后一点向外和向下的坡度

下面的示例使用两条曲线绘制抛物线。函数

drawCurve（）

• 我画了两次，一次缩放，一次正常
• 控制点是蓝色的
• 曲线上的三个点是红色的
• 斜坡是绿色的

比如说

const ctx=canvas.getContext（“2d”）；
//缩尺
ctx.setTransform（2,0,0,2，-50，-55）；
drawAll（）；
//无刻度
setTransform（1,0,0,1，-50,0）；
drawAll（）；
函数drawCurve（）{
ctx.beginPath（）；
ctx.strokeStyle=“#000”；
移动到（100-30，30）；//从左侧开始
四次曲线(
100-30/2100，//控制点设置从起点到中心的坡度
100，100//中心点
);
四次曲线(
100+30/2100，//控制点设置从中心到最后一个点的坡度
100+30，30//最后一点
);
ctx.stroke（）；
}
函数drawAll（）{
//曲线上的点
提取点（100-30,30）；
提款点（100100）；
支点（100+30,30）；
//控制点
提款点（100-30/2100，#00F）；
提款点（100+30/2100，#00F）；
//通过所有点绘制直线以显示坡度
抽绳（100-30,30100-30/2100）；
抽绳（100-30/21000100）；
抽绳（100100100+30/2100）；
抽绳（100+30/21000+30,30）；
//绘制曲线
绘制曲线（）；
}
功能提取点（x、y、col=“红色”）{
ctx.fillStyle=col；
ctx.beginPath（）；
弧（x，y，2，0，Math.PI*2）；
ctx.fill（）；
}
功能抽绳（x、y、x1、y1、col=“#0A08”）{
ctx.strokeStyle=col；
ctx.beginPath（）；
ctx.lineTo（x，y）；
ctx.lineTo（x1，y1）；
ctx.stroke（）；
}

画布{
边框：1px纯黑；
}

---

请用目前使用的代码编辑问题对不起，我已经编辑了这篇文章