绘制具有 3 个给定点的抛物线 canvas

Question

我需要在 html5 canvas 中绘制完美曲线/抛物线。 给出了点的 3 个 {x;y} 坐标。 我尝试使用 bezierCurveTo 或 quadraticCurveTo，但曲线不会在中间点 go。

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

我得到的结果：当前结果

代码：

      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

Answer 1

控制点定义坡度

您将需要使用两个贝塞尔曲线，因为曲线不会通过控制点。

控制点将曲线的斜率设置为从最后一个点向外到下一个点。

示例（下）使用两条曲线绘制抛物线。 function drawCurve()

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

例如

 const ctx = canvas.getContext("2d"); // drawScaled ctx.setTransform(2,0,0,2,-50, -55); drawAll(); // without scale ctx.setTransform(1,0,0,1,-50, 0); drawAll(); function drawCurve() { ctx.beginPath(); ctx.strokeStyle = "#000"; ctx.moveTo(100 - 30, 30); // start left side ctx.quadraticCurveTo( 100 - 30 / 2, 100, // controls point sets slope out from start and into center 100, 100 // center point ); ctx.quadraticCurveTo( 100 + 30 / 2, 100, // control point sets slope out from center and into last point 100 + 30, 30 // last point ); ctx.stroke(); } function drawAll() { // points on curve drawPoint(100-30, 30); drawPoint(100, 100); drawPoint(100+30, 30); // Control points drawPoint(100 - 30 / 2, 100, "#00F"); drawPoint(100 + 30 / 2, 100, "#00F"); // Draw line through all points to show slopes drawLine(100-30, 30, 100 - 30 / 2, 100); drawLine(100 - 30 / 2, 100, 100, 100); drawLine(100, 100, 100 + 30 / 2, 100); drawLine(100 + 30 / 2, 100, 100 + 30, 30); // Draw curve drawCurve(); } function drawPoint(x,y,col = "red") { ctx.fillStyle = col; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2); ctx.fill(); } function drawLine(x,y, x1, y1, col = "#0A08") { ctx.strokeStyle = col; ctx.beginPath(); ctx.lineTo(x, y); ctx.lineTo(x1, y1); ctx.stroke(); }

 canvas { border: 1px solid black; }

 <canvas id="canvas"></canvas>