如何使用抛物线方程绘制图形

Question

我正在尝试使用抛物线方程 (y=x*x) 创建一个图形。但是我对计算控制点的值有点困惑。我应该如何计算控制点值。

我的 JavaScript 函数：

function drawParabola()
{
    ctx.beginPath();
    for(i=-2;i<=2;i++)
    {                     
        //formual y= x * x;
        y = i * i;
        x = i;
        if (i == -2) {
            ctx.moveTo((5 + x) * 30, Math.abs((-5 + y)) * 30);      
        }
        else {
            //ctx.lineTo((5 + x) * 30, Math.abs((-5 + y)) * 30);
            context.quadraticCurveTo(**?**, **?**, (5 + x) * 30, Math.abs((-5 + y)) * 30);
        }
        ctx.strokeStyle = 'orange';
        ctx.stroke();
    }
}

Answer 1

二次曲线的控制点是切线的交点。

  context.beginPath();
  context.strokeStyle = 'orange';
  for(i=-2;i<=2;i++) {
    // Current point
    x1 = i;        
    y1 = x1 * x1;
    y1p = 2 * x1; // derivitive

    // Previous point
    x0 = i - 1;
    y0 = x0 * x0;
    y0p = 2 * x0; // derivitive

    // Find intersection of tangents
    // line0: y - y0 = y0p * (x - x0)
    // line1: y - y1 = y1p * (x - x1)
    //
    // line0: y = y0p * x - y0p * x0 + y0
    // line1: y = y1p * x - y1p * x1 + y1
    //
    // y0p * x - y0p * x0 + y0 = y1p * x - y1p * x1 + y1
    // y0p * x - y1p * x = y0p * x0 - y0 - y1p * x1 + y1
    // x = (y0p * x0 - y0 - y1p * x1 + y1) / (y0p - y1p)

    // Intersection point of tangents
    xi = (y0p * x0 - y0 - y1p * x1 + y1) / (y0p - y1p);
    yi = y0p * xi - y0p * x0 + y0;

    // Rescale for rendering
    cx = (5 + x1) * 30;
    cy = (5 + y1) * 30;

    cix = (5 + xi) * 30;
    ciy = (5 + yi) * 30;

    if (i == -2) {
      context.moveTo(cx, cy);
    }
    else {
      //context.lineTo(cx, cy);
      context.quadraticCurveTo(cix, ciy, cx, cy);
    }
  }
  context.stroke();