如何使用parbola方程繪製圖形

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